Skip to content
This repository has been archived by the owner on Nov 12, 2024. It is now read-only.

Commit

Permalink
Release 3.0.0 (#162)
Browse files Browse the repository at this point in the history
* Update vega demos with anchors

* Fix bugs in vega demos

* Add echarts onboarding demo

* Remove orphan util.js

* Add plotly demos

* Remove demos from test directories

* Add global bootstrap npm script

* Set `noImplicitAny` to false

* Add eslint

* Add `dom` lib to tsconfig

* Move onboarding code from vega-demo to vega lib

* Add interfaces for bar chart onboarding spec

* Move vega demo data to public directory

* Add enum for supported chart types

* Extract bar chart onboarding for vega

* Distribute vega demo code to vega and core

* Distribute vega change matrix code

* Distribute vega horizon graph code

* Remove unecessary files

* Re-add injector.ts

* Start with echart demos

* switch echarts to new lib structure

* seperate canvas and svg rendering in file structure

* echarts: add onboarding for bar chart and change matrix

* echarts: add onboarding for horizon graph

* Create build-demo.yml

* Store and download artifacts

* Add PR trigger

* Add `needs` attribute for deploy job

* Change upload artifact path

* Add gh-pages actoin

* Update build-demo.yml

* Update build-demo.yml

* Update build-demo.yml

* Use library adapter for plotly demo

* Rename horizon-graph file

* Add anchors for ploty bar chart

* Fix  axis anchors for vega demo

* Add anchors for plotly horizon graph demo

* Add anchors for plotly change matrix

* Create .nojekyll

* Delete .nojekyll

* Change root npm scripts

* Disable gh-pages and list directory

* Modify trigger for debug purposes

* Checkout gh-pages branch and list git status

* Fix artifact download path

* Minimize actions trigger

* Add git scripts to workflow

* Switch to git-auto-commit-action

* Disable push; echo env variable

* Use relative imports in html files

* Activate git-auto-commit-action again

* Fix build job

* Update demo dev dependencies (snowpack)

* Replace _dist_ with dist in demos

* Activate build and deploy again

* Fix esbuild error

By modifying bootstrap npm script

* Remove @snowpack/plugin-webpack

* Revert GitHub Actions trigger

* Add demo test workflow

* Ignore test for develop branch

* add possitility to find DOM nodes by their text content

* fix snowpack config

* echarts: add more chart anchors

* ehcarts: fix overlapping markers

* vega, plotly: fix overlapping markers

* Improve README

* Increase size of the logo

* Prefix interfaces with an `I`

* Fix build by renaming missing interfaces

* Update branding

* add first working version of stepper

* add stepper interface

* add stepping btn functinoality

* fix interface names

* finalize stepping interface

* echarts: add onboarding stepper to change-matrix and horizon-graph

* plotly + vega: add onboarding stepper to all chart types

* Rename npm packages to @visahoi

* Rename package directories

* Fix import paths

* Rename imports

* Mark demos as private packages

Reason: avoid publishing the demos on npm

* Rename `onboarding()` to `ahoi()`

* Fix imports in echarts package

* fix onboarding css in demos and hide canvas for echarts

* plotly: find title marker by value

* add proper page title and h1 to all demos

* add onboardingStages

* rename  to

* Code formatting

* Fix typos

* fix onboarding stage typings

* Changes bar color and autosize (closes #30).

* vega-lite: add min-max to horizon chart

* echarts: add min-max to horizon chart

* Comment out console.log()

* get id of dom element where visuallization is rendered

* use getAnchor() method for all messages

* remove useDOMRect

* move findDomNodesByValue into anchor object

* rename EChartType to EVisualizationType and replace vis type string with EVisualizationType in demos

* renaming

* refactor onboardingElement

* refactor visElement

* Add new favicon to demos in different sizes

* Add missing favicon to vega-demo

* Update npm dependencies

* FIx D3 event listener

* Fix echarts import

https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide

* first tryouts

* change runtime object dependencies to get onboarding view working again

* change node/npm version

* add ts watcher for core and plotly

* add watcher to echarts and vega-lite

* first steps - rendering div + svg overlay

* render anchor right in the svg

* improve svg-overlay and anchors

* add vega scatterplot to charts

* add scatterplot to plotly

* add nodemon

* add scatterplot to echarts

* remove d3 + refactor code

* add csv-import-function to libraries to remove d3

* add tooltips with popper.js and add resize events

* align anchors right + handle window-resize correctly

* import css for popper style

* style tooltips

* add overlayUI + navigation items + fontawesome

* integrate navigation items with clickevents

* add functionality to navigationitems to display the right anchors + adding anchor items + code improvement

* make navigation-layer function as it should

* finalize functionalities + refactor js styles in css files + code improvement

* refactor item-classes

* adding backdrop + horizontal view + style changes

* removed all package-lock.json and npm i

* same as before

* package-lock.json update

* minor changes

* package.json change

* package.json change

* update package.json

* rough refactoring

* fix versions so that lerna bootstrap passes

* add svelte and rollupjs to core package

* add svelte and rollupjs to echarts, plotly, vega

* setup css processing for plotly

* finalize build pipeline for plotly

* working barchart in plotly.js

* finalize refactoring of plotly

* echarts works

* update snowpack

* add open onboarding button

* replace snowpack by vite

* add reset function to store, destroy onboarding UI on btn click

* provide update function

* add main navigatio button

* add possibility to edit onboarding messages

* remove not used files

* refactor backdrop

* remove unused functions

* all echarts demos work with svelte

* all plotly demos work with svelte

* all vega-lite demos work with svelte

* remove -w from package.json

* use bundled plotlyjs module instead of cdn link

* remove all references to snowpack

* Marker improvements (#72)

* improve backdrop

* improve markers

* make tooltip responsive

* Added margin to the closing X icon in  tooltips (#89)

* The onboarding is now opened in a single click of show onboarding button (#90)

* Added treemap to plotly demo (#92)

* Added pointer-events to trigger the underlying plot (#95)

* Created treemap to echarts demo (#96)

* offer additional functions (#98)

* Add onboarding to plotly treemap (#99)

* Marker size is configurable (#104)

* Bump minimist from 1.2.5 to 1.2.6 in /packages/core (#75)

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* Bump nanoid from 3.1.30 to 3.3.4 in /packages/core (#84)

Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.30 to 3.3.4.
- [Release notes](https://github.com/ai/nanoid/releases)
- [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md)
- [Commits](ai/nanoid@3.1.30...3.3.4)

---
updated-dependencies:
- dependency-name: nanoid
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* fix createBasicOnboardingStage function

* Add treemap demo for vega lite (#100)

* chart cannot be null

* Show X icon when the onboarding is open and ? icon when it's closed (#91)

* The text is in the onboarding is changed when its opened

* Tried with fontawesome pseudoclasses

* Open onboarding icon is not shown now because we are try
ing to fix the class binding issue for the font-awesome icons(Work In Progress)

* The X icon is shown when the onboarding is opened

* The X icon is shown when onboarding is opened

* The color of the circle which has X  is now same as the activeOnboarding stage color

* Fixed the issues when the plotly horizonchart is null (#110)

* Add stepper navigation (#105)

* WIP

* WIP

* Added navigation marker(WIP)

* WIP

* Changed the position of the navigation marker and removed the console logs (WIP)

* Navigation marker is wrapped in div and its sorted and next and previous arrows are added(WIP)

* Added stepper navigation

* show stepper navigation as optional (WIP)

* The stepper navigation is configurable in ahoiConfig

* Navigation marker is initially selected based on the active onboarding stage

* Navigation markers opacity is changed according to the selection

* Refactored by removing extra codes and console

* Removed console message

* Stepper navigation is configurable

* check for the marker trigger (WIP)

* changed the stylings

* Added show on
boarding navigation button and corrected the bug with the navigation icons

* setting the pointerevents and opacity for the navigation icons

* Fixing the marker issues in stepper navigation(WIP)

* Fixed marker issue in onboarding navigation

* Fixed the marker issue is stepper navigation and removed unwanted codes

* AddedmarkerIndexId to the store

* Navigation markers are changed when the active markers are opened and closed

* The navigation marker is changed based on clicking the markers

* Removed console logs and extra codes

* Added getNavigationMarkerDomId function and fixed some minor issues

* The space of the navigation marker and visahoi-marker-navigation-item width is reduced

* The marker in the stepper navigation is not highlighted when the activeMarker is closed

* Help and close label is configurable (#117)

* The help and close label is configurable

* Added unwanted codes

Co-authored-by: Daniela <[email protected]>

* Added onboardings to treemap - Echarts (#108)

* Added onboardings to Echarts

* Edited the onboardings and corrected the console error in getDomNodeByTextContent

* Changed the variable declaration

Co-authored-by: Daniela <[email protected]>

* Onboarding does not work without chart title (#116)

* WIP

* The onboardings and chart is shown when the chart title is not provided

* Onboarding is shown without chart title

* Refactored the code

* Variable declaration is changed

* Bump svelte from 3.44.1 to 3.49.0 in /packages/core (#126)

Bumps [svelte](https://github.com/sveltejs/svelte) from 3.44.1 to 3.49.0.
- [Release notes](https://github.com/sveltejs/svelte/releases)
- [Changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
- [Commits](sveltejs/svelte@v3.44.1...v3.49.0)

---
updated-dependencies:
- dependency-name: svelte
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump parse-url from 6.0.0 to 6.0.2 (#111)

Bumps [parse-url](https://github.com/IonicaBizau/parse-url) from 6.0.0 to 6.0.2.
- [Release notes](https://github.com/IonicaBizau/parse-url/releases)
- [Commits](https://github.com/IonicaBizau/parse-url/commits)

---
updated-dependencies:
- dependency-name: parse-url
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add setOnboardingStage function (#133)

* Onboarding stage is configurable

* setOnboardingStage function is created it overrides the existing onboarding stage

* Added a condition to check whether the id of of the onboarding stage to be updated is provided

* Make the tooltip editable in edit mode (#127)

* Edit mode button is added and when clicked the trash icon is shown in tooltip header

* Added deleteOnboardingMessage function

* The onboarding stage is deleted when all its onboarding messages are deleted

* Onboarding message title can be edited(WIP)

* Onboarding message title is edited. It has a bug to be corrected(WIP)

* Onboarding message can be edited(use mutation Observer)

* Fix the title issue with changing the title (WIP)

* rough draft of new edit concept

* changed css styling and removed unwanted codes

* CSS styling changes

* Changes from PR

* Color of edit mode button is changed

* Font size of tooltip icons are changed and the edit the position and size of the editMode button

* title attribute is added to icons and pointer is added to the button(PR changes)

* uppercase tooltips

Co-authored-by: Daniela <[email protected]>

* Add getOnboardingMessages function and delete Stage (#135)

* Edit mode button is added and when clicked the trash icon is shown in tooltip header

* Added deleteOnboardingMessage function

* The onboarding stage is deleted when all its onboarding messages are deleted

* Onboarding message title can be edited(WIP)

* Onboarding message title is edited. It has a bug to be corrected(WIP)

* Onboarding message can be edited(use mutation Observer)

* Onboarding stages can be deleted

* Added comments

* Delete onboarding stages is configurable in ahoi config(WIP)

* Removed debugger

* WIP

* Removed the unwanted codes for delete onboarding stage in ahoi config

* WIP

* deleteOnboardingStage function is added to delete the onboarding stage

* Added getOnboardingStages function

* console error message is change

* console error message is changed

* Add onboarding for heatmap to plotly (#118)

* Added heatmap to plotly and just added title to the onboarding

* add onboardings to heatmap(WIP)

* Add Onboardings to heatmap(WIP)

* Removed console log

* Refactored the code

* Added onboarding messages for interacting

* Changed onboarding messages(WIP)

* Removed console, position and onboarding messages are changed

* remove brackets

Co-authored-by: Daniela <[email protected]>

* Edit mode icon is shown only in demos (#140)

* Removed EditMode button from onboardingMainItem and added to the scatterplot of plotly demos(WIP)

* Removed unwanted imports

* PR changes

* de-duplicate onboarding stages

* Onboarding messages are deleted from the store when they are deleted (#143)

* Onboarding messages are deleted from the store when they are deleted

* minor changes

* onboarding messages are deleted from the store when a stage is deleted (#145)

* Removed the console logs (#146)

* changed order, added tooltip

* WIP

* deleteOnboardingMessage in tooltip is changed to for only the active onboarding stage

* Added missing space (#153)

* fixed the icon bug when deleting the onboarding stage (#154)

* fixed the icon bug when deleting the onboarding stage

* changed color in setOnboarding

* update lerna version

* comment out deploy workflow

* Update create-release.yml

* Update create-release.yml

* Update npm-publish.yml

* add order to onboarding messages (#156)

* Add orderto scatterplot messages and changed the order of arrangement in navigation marker

* Order in the navigation marker is changed

* create set onboarding message function (#158)

* added set onboarding message

* Added setonboardingMessage function

* Passed the message id to setOnboardingMessage fn

* minor changes

* add exports to all libraries

Co-authored-by: Daniela <[email protected]>

* Removed console logs (#160)

* Update create-release.yml

* Update create-release.yml

* Update create-release.yml

* Update create-release.yml

* Publish

 - @visahoi/[email protected]
 - @visahoi/[email protected]
 - @visahoi/[email protected]
 - @visahoi/[email protected]

* update demo package versions

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Holger Stitz <[email protected]>
Co-authored-by: doomsayer2 <[email protected]>
Co-authored-by: dvtschachinger <[email protected]>
Co-authored-by: Thomas Schachinger <[email protected]>
Co-authored-by: dvsilviyageo <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Silviya Geo <[email protected]>
  • Loading branch information
8 people authored Sep 1, 2022
1 parent 3e6134c commit 4af226e
Show file tree
Hide file tree
Showing 209 changed files with 69,810 additions and 7 deletions.
12 changes: 12 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# stop .editorconfig files search on current file.
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

20 changes: 20 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"env": {
"browser": true,
"es2020": true
},
"extends": [
"standard"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
"no-underscore-dangle": "warn"
}
}
55 changes: 55 additions & 0 deletions .github/workflows/build-demo.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Build and deploy demos

on:
push:
branches:
- develop
# Only pushes to the develop branch should trigger the build and deploy of demos
# pull_request:
# branches:
# - deploy

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12
- name: Install workspace dependencies
run: npm install
- name: Bootstrap lerna workspace
run: npm run bootstrap
- name: Build packages in workspace
run: npm run build
- name: Upload demo build artifcats
uses: actions/upload-artifact@v2
with:
name: demos
path: |
packages/echarts-demo/build/
packages/plotly-demo/build/
packages/vega-demo/build/
# deploy:
# needs: [build]
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v2
# with:
# ref: gh-pages
# - name: Remove old demos
# run: rm -rf ./demos
# - uses: actions/download-artifact@v2
# with:
# name: demos
# path: ./demos
# - uses: stefanzweifel/git-auto-commit-action@v4
# with:
# # Required
# commit_message: Update demo files from GitHub Actions # from source of commit $GITHUB_SHA
# # Optional branch to push to, defaults to the current branch
# branch: gh-pages
12 changes: 8 additions & 4 deletions .github/workflows/create-release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,23 @@ jobs:
- name: Check out code
uses: actions/checkout@v3
with:
ref: develop
ref: main
ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
- name: Reset main branch
run: |
git fetch origin develop:develop
git reset --hard develop
- name: Change version number
id: version
run: |
echo -n "::set-output name=next_tag::"
npm version --no-git-tag-version ${{ github.event.inputs.versionName }}
- name: Create pull request into master
lerna version ${{ github.event.inputs.versionName }} --no-private --no-git-tag-version --yes --no-push
- name: Create pull request into main
uses: peter-evans/create-pull-request@v4
with:
branch: release/${{ steps.version.outputs.next_tag }}
commit-message: 'chore: release ${{ steps.version.outputs.next_tag }}'
base: master
base: main
title: Release ${{ steps.version.outputs.next_tag }}
labels: release
reviewers: dvdanielamoitzi
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ name: publish to npm
on:
push:
branches:
- master
- main

jobs:
publish-npm:
Expand Down
25 changes: 25 additions & 0 deletions .github/workflows/test-demo.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

# currently we are testing the demos by building them
name: Test demos

on:
push:
branches-ignore:
- develop # ignored since the branch is tested by the build-demo workflow

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12
- name: Install workspace dependencies
run: npm install
- name: Bootstrap lerna workspace
run: npm run bootstrap
- name: Build packages in workspace
run: npm run build
15 changes: 15 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
lerna-debug.log
.sass-cache
.jekyll-metadata
.DS_Store
/.idea
/.vscode
/build
/docs/_site
/docs/Gemfile.lock
/node_modules
/packages/*/node_modules
/packages/*/build
/packages/*/LICENSE
dist
tsconfig.tsbuildinfo
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2020 ffg-seva
Copyright (c) 2020 FFG SEVA Consortium

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
200 changes: 199 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,200 @@
# Semi-Automated Generation of Visualization Onboarding Using High-Level Grammar
<p align="center"><img src="/docs/img/logo.png" alt="VisAhoi" width="35%" /></p>
<p align="center">
<a href="https://github.com/ffg-seva/onboarding-prototype/actions">
<img src="https://github.com/ffg-seva/onboarding-prototype/workflows/Build%20and%20deploy%20demos/badge.svg?branch=develop" alt="CI" />
</a>
</p>


# What is VisAhoi?

**VisAhoi is a library to onboard users to visualizations by explaining the data and visual encoding.** VisAhoi employs the visualization specifications of high-level descriptive visualization grammars from [ECharts](https://echarts.apache.org), [Plotly.js](https://plotly.com/javascript/), or [Vega-Lite](https://vega.github.io/vega-lite), and provides onboarding messages and anchors for different visualization types (e.g., bar chart, change matrix, horizon graph).

# Key Features

* Integrable
* Extensible
* Reusable
* Automated
* Customizable

# Getting Started

VisAhoi offers adapter packages for [ECharts](https://echarts.apache.org), [Plotly.js](https://plotly.com/javascript/), or [Vega-Lite](https://vega.github.io/vega-lite). Choose the VisAhoi adapter for your visualization library below and follow the instructions.

## VisAhoi for ECharts

Install the VisAhoi adapter:

```
npm install @visahoi/echarts --save
# or with yarn
yarn add @visahoi/echarts
```

Let's enhance a bar chart with VisAhoi:

```js
import * as echarts from 'echarts';
import { ahoi } from '@visahoi/echarts';

function render() {
const data = { /* bar chart data */ };

const chart = echarts.init(document.getElementById('vis'), null, { renderer: 'svg' });
chart.setOption({
/* EChart specification */
});

ahoi('bar-chart', chart, ahoiConfig);
};

render();
```

Please note that VisAhoi supports currently only the SVG renderer.

📊 See the [entire source code of the bar chart example](./packages/echarts-demo/src/bar-chart.js) or explore the other [ECharts demos](https://ffg-seva.github.io/onboarding-prototype/demos/echarts-demo/build/).


## VisAhoi for Plotly.js

Install the VisAhoi adapter:

```
npm install @visahoi/plotly --save
# or with yarn
yarn add @visahoi/plotly
```

Let's enhance a bar chart with VisAhoi:

```js
import { ahoi } from '@visahoi/plotly';

async function render() {
const traces = { /* bar chart data */ };
const layout = { /* bar chart specification */ };

const chart = await Plotly.newPlot('vis', traces, layout);

ahoi('bar-chart', chart, ahoiConfig);
}

render();
```

📊 See the [entire source code of the bar chart example](./packages/plotly-demo/src/bar-chart.js) or explore the other [Plotly.js demos](https://ffg-seva.github.io/onboarding-prototype/demos/plotly-demo/build/).


## VisAhoi for Vega-Lite

Install the VisAhoi adapter:

```
npm install @visahoi/vega --save
# or with yarn
yarn add @visahoi/vega
```

Let's enhance a bar chart with VisAhoi:

```js
import vegaEmbed from 'vega-embed';
import { ahoi } from '@visahoi/vega';

async function render() {
const spec = { /* Vega-Lite specification with data */ };

const chart = await vegaEmbed('#vis', spec, { renderer: 'svg' });

ahoi('bar-chart', chart, ahoiConfig);
};

render();
```

Please note that VisAhoi supports currently only the SVG renderer.

📊 See the [entire source code of the bar chart example](./packages/vega-demo/src/bar-chart.js) or explore the other [Vega-Lite demos](https://ffg-seva.github.io/onboarding-prototype/demos/vega-demo/build/).


# Supported Visualization Types

Currently VisAhoi provides the onboarding messages for following visualization types:

* Bar Chart (`bar-chart`)
* Change Matrix (`change-matrix`)
* Horizon Graph (`horizon-graph`)

The visualization type is passed as first parameter to the `ahoi(type, chart, ahoiConfig)` function. The second paramter is the the chart instance of the used visualization library.


# Customization
The onboarding can be customized via the `ahoiConfig` parameter which is passed to the `ahoi(type, chart, ahoiConfig)` function.
It allows you to customize the onboarding messages and the backdrop.

The interface of the ahoiConfig looks like this:
```
interface IAhoiConfig {
onboardingMessages: IOnboardingMessage[];
backdrop: IBackdropConfig;
}
```

To customize the onboarding messages, you can either pass your own onboarding messages, or adapt the automatically generated onboarding messages for your specific visualization type. To get the automatically generated messages use our function `generateBasicAnnotations()`. It returns an array of onbaording messages which you can modify or directly pass to the `ahoi()` function.

An onboarding message has the following interface:
```
interface IOnboardingMessage {
anchor: any;
requires: string[];
text: string;
title: string;
onboardingStage: IOnboardingStage;
tooltipPosition?: TooltipPosition;
}
```

The backdrop can also be configured via the `ahoiConfig`. You can define if you want to show a backdrop at all and customize it's opacity.
The interface for the backdrop looks like this:
```
interface IBackdropConfig {
show: boolean;
opacity: number;
}
```

# Developer Information

VisAhoi uses [lerna.js](https://[lernajs.org](https://lerna.js.org/)) to divide the soruce code into separate npm packages and demos.


## Build Instructions

For a basic setup allowing you to build and run examples:

```
git clone https://github.com/ffg-seva/onboarding-prototype.git
cd onboarding-prototype
npm install
npm run bootstrap
```

Afterwards you can run the following npm scripts:

* `npm run build` compiles all npm packages and builds the sources of the demo pages
* `npm start` runs all demo pages and opens them in the browser

In case you want to start a specific demo page for a chosen visualization library (`echarts`, `plotly`, or `vega`):

```
cd ./packages/onboarding-<visualization-library>-demo
npm start
```

<!--
## Publish (internal)
TBD
-->
Binary file added docs/img/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions lerna.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"packages": [
"packages/*"
],
"version": "independent"
}
Loading

0 comments on commit 4af226e

Please sign in to comment.