From 6e903d9887aedb2e12fc54f3ba2cd00bc2ba9ddd Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Wed, 1 May 2019 16:03:35 -0700 Subject: [PATCH] Stacks view (#28) * remove comment * try/catch around signal getter * expose default viewer options * clone default viewer options, merge every update * correct shouldViewstateTransition * extend specLanguage * add grid signal names * use new signalname * nullref check * add name for catch-all * get key or catch-all * added stacks view * use common axes code * prefer 3d for stacks, 2d for treemap * transitions durations text * use legend data for quantitative color * remove opacity * show bin signals * add trailing slashes * prevent x-overlap * remove sequ * clamp signal range * use tick value for selection, format number * use defaultPresenterConfig * enable 2D/3D in transition editor * fix boundary check for resize --- docs/_layouts/default.html | 4 +- docs/app/index.html | 14 +++ docs/tests/umd/transition.html | 2 +- packages/sanddance-app/src/index.html | 14 +++ .../sanddance-explorer/src/dialogs/chart.tsx | 13 +- .../src/dialogs/settings.tsx | 51 +++++++- packages/sanddance-explorer/src/explorer.tsx | 8 +- packages/sanddance-explorer/src/language.ts | 6 + packages/sanddance-react/src/viewer.tsx | 1 + packages/sanddance-test-umd/src/transition.ts | 23 ++-- packages/sanddance/src/defaults.ts | 18 +-- packages/sanddance/src/expression.ts | 22 +--- packages/sanddance/src/signals.ts | 5 +- packages/sanddance/src/specs/axes.ts | 63 ++++++++++ packages/sanddance/src/specs/constants.ts | 4 + .../sanddance/src/specs/scatterPlot/axes.ts | 54 +-------- .../src/specs/stableBarChart/axes.ts | 56 ++------- .../src/specs/stableBarChart/signals.ts | 2 +- packages/sanddance/src/specs/stacks/axes.ts | 18 +-- packages/sanddance/src/specs/stacks/data.ts | 96 +++++++-------- packages/sanddance/src/specs/stacks/index.ts | 20 +--- packages/sanddance/src/specs/stacks/marks.ts | 7 +- packages/sanddance/src/specs/stacks/scales.ts | 59 ++------- .../sanddance/src/specs/stacks/signals.ts | 112 ++++++++++-------- packages/sanddance/src/specs/types.ts | 39 ++++-- .../sanddance/src/vega-deck.gl/interfaces.ts | 6 +- .../sanddance/src/vega-deck.gl/marks/text.ts | 6 +- .../sanddance/src/vega-deck.gl/presenter.ts | 40 +++++-- packages/sanddance/src/viewer.ts | 10 +- 29 files changed, 422 insertions(+), 351 deletions(-) create mode 100644 packages/sanddance/src/specs/axes.ts diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index b0754673..5acec5c7 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -28,10 +28,10 @@ Home - + Try Online - + Examples diff --git a/docs/app/index.html b/docs/app/index.html index 080adf10..9faf46ea 100644 --- a/docs/app/index.html +++ b/docs/app/index.html @@ -59,6 +59,20 @@ }; var prefs = { "*": { + "stacks": { + "*": { + "*": { + "view": "3d" + } + } + }, + "treemap": { + "*": { + "*": { + "view": "2d" + } + } + }, "*": { "*": { "*": { diff --git a/docs/tests/umd/transition.html b/docs/tests/umd/transition.html index 29de52a9..dccf00e8 100644 --- a/docs/tests/umd/transition.html +++ b/docs/tests/umd/transition.html @@ -16,7 +16,7 @@

vega-deck.gl transition editor

- +
diff --git a/packages/sanddance-app/src/index.html b/packages/sanddance-app/src/index.html index f3f583ff..f23cb204 100644 --- a/packages/sanddance-app/src/index.html +++ b/packages/sanddance-app/src/index.html @@ -84,6 +84,20 @@ }; var prefs = { "*": { + "stacks": { + "*": { + "*": { + "view": "3d" + } + } + }, + "treemap": { + "*": { + "*": { + "view": "2d" + } + } + }, "*": { "*": { "*": { diff --git a/packages/sanddance-explorer/src/dialogs/chart.tsx b/packages/sanddance-explorer/src/dialogs/chart.tsx index dd2194c7..1a6e6741 100644 --- a/packages/sanddance-explorer/src/dialogs/chart.tsx +++ b/packages/sanddance-explorer/src/dialogs/chart.tsx @@ -48,14 +48,13 @@ export function Chart(props: Props) { text: strings.chartTypeTreeMap, checked: props.chart === 'treemap', disabled: props.disabled + }, + { + key: 'stacks', + text: strings.chartTypeStacks, + checked: props.chart === 'stacks', + disabled: props.disabled } - //, - // { - // key: 'stacks', - // text: strings.chartTypeStacks, - // checked: props.chart === 'stacks', - // disabled: props.disabled - // } ]} onChange={(e, o) => props.onChangeChartType(o.key as SandDance.types.Chart)} /> diff --git a/packages/sanddance-explorer/src/dialogs/settings.tsx b/packages/sanddance-explorer/src/dialogs/settings.tsx index dd6dfcbb..221c0dd7 100644 --- a/packages/sanddance-explorer/src/dialogs/settings.tsx +++ b/packages/sanddance-explorer/src/dialogs/settings.tsx @@ -107,11 +107,20 @@ function initState(props: Props): State { }; } +function signalGroupKey(key: string) { + for (let i = 0; i < strings.signalGroups.length; i++) { + if (strings.signalGroups[i].prefix === key) { + return key; + } + } + return '*'; +} + function vegaSignalGroups(vegaSignals: VegaSignal[]) { const signalGroupMap: { [key: string]: VegaSignal[] } = {}; vegaSignals.forEach(vs => { const split = vs.name.split('_'); - const key = split[0]; + const key = signalGroupKey(split[0]); signalGroupMap[key] = signalGroupMap[key] || []; signalGroupMap[key].push(vs); }); @@ -183,6 +192,46 @@ export class Settings extends React.Component { })} /> + + { + this.props.explorer.viewerOptions.transitionDurations.color = value; + }} + min={0} + max={10000} + defaultValue={this.props.explorer.viewerOptions.transitionDurations.color} + /> + { + this.props.explorer.viewerOptions.transitionDurations.position = value; + }} + min={0} + max={10000} + defaultValue={this.props.explorer.viewerOptions.transitionDurations.position} + /> + { + this.props.explorer.viewerOptions.transitionDurations.size = value; + }} + min={0} + max={10000} + defaultValue={this.props.explorer.viewerOptions.transitionDurations.size} + /> + { + this.props.explorer.viewerOptions.transitionDurations.view = value; + }} + min={0} + max={10000} + defaultValue={this.props.explorer.viewerOptions.transitionDurations.view} + /> +