From fb9e912d0bc47471024a66e3c8f59afd888e4129 Mon Sep 17 00:00:00 2001
From: Benoit Vinay <ben@benoitvinay.com>
Date: Mon, 7 Mar 2022 12:13:22 +0100
Subject: [PATCH] F/static viz/tester (#20842)
* Types and options constants added to all chart types
* Chart types and options added to StaticChart
* Static viz page refactored to include an editor
* Editing data added
* Error handling added
* Misc
* StaticChart converted to TypeScript
* Stories for StaticChart added to storybook
* Misc
* Updates from PR review
---
.../metabase/internal/pages/StaticVizPage.jsx | 869 ++++--------------
.../CategoricalAreaChart/constants.ts | 26 +
.../CategoricalBarChart/constants.ts | 26 +
.../CategoricalDonutChart/constants.ts | 16 +
.../CategoricalLineChart/constants.ts | 26 +
.../CategoricalWaterfallChart/constants.ts | 27 +
.../components/FunnelChart/constants.ts | 22 +
.../components/LineAreaBarChart/constants.ts | 382 ++++++++
.../components/ProgressBar/constants.ts | 65 ++
.../TimeSeriesAreaChart/constants.ts | 25 +
.../TimeSeriesBarChart/constants.ts | 30 +
.../TimeSeriesLineChart/constants.ts | 17 +
.../TimeSeriesWaterfallChart/constants.ts | 23 +
.../containers/StaticChart/StaticChart.jsx | 65 --
.../StaticChart/StaticChart.stories.tsx | 47 +
.../containers/StaticChart/StaticChart.tsx | 57 ++
.../containers/StaticChart/constants.ts | 78 ++
.../containers/StaticChart/types.ts | 8 +
18 files changed, 1071 insertions(+), 738 deletions(-)
create mode 100644 frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/FunnelChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/LineAreaBarChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/ProgressBar/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.jsx
create mode 100644 frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.stories.tsx
create mode 100644 frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx
create mode 100644 frontend/src/metabase/static-viz/containers/StaticChart/constants.ts
create mode 100644 frontend/src/metabase/static-viz/containers/StaticChart/types.ts
diff --git a/frontend/src/metabase/internal/pages/StaticVizPage.jsx b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
index 07b6092c3ed..a86fb6058c1 100644
--- a/frontend/src/metabase/internal/pages/StaticVizPage.jsx
+++ b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
@@ -1,12 +1,107 @@
-import React from "react";
-import _ from "underscore";
+import React, { useState } from "react";
import Heading from "metabase/components/type/Heading";
import Subhead from "metabase/components/type/Subhead";
import Text from "metabase/components/type/Text";
+import {
+ STATIC_CHART_TYPES,
+ STATIC_CHART_DEFAULT_OPTIONS,
+} from "metabase/static-viz/containers/StaticChart/constants";
import StaticChart from "metabase/static-viz/containers/StaticChart";
import { PageRoot, PageSection } from "./StaticVizPage.styled";
+import {
+ TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_LINE_CHART_TYPE,
+} from "../../static-viz/components/TimeSeriesLineChart/constants";
+import {
+ TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_AREA_CHART_TYPE,
+} from "../../static-viz/components/TimeSeriesAreaChart/constants";
+import {
+ TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_BAR_CHART_TYPE,
+} from "../../static-viz/components/TimeSeriesBarChart/constants";
+import {
+ CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_LINE_CHART_TYPE,
+} from "../../static-viz/components/CategoricalLineChart/constants";
+import {
+ CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_AREA_CHART_TYPE,
+} from "../../static-viz/components/CategoricalAreaChart/constants";
+import {
+ CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_BAR_CHART_TYPE,
+} from "../../static-viz/components/CategoricalBarChart/constants";
+import {
+ CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_DONUT_CHART_TYPE,
+} from "../../static-viz/components/CategoricalDonutChart/constants";
+import {
+ PROGRESS_BAR_DEFAULT_DATA_1,
+ PROGRESS_BAR_DEFAULT_DATA_2,
+ PROGRESS_BAR_DEFAULT_DATA_3,
+ PROGRESS_BAR_DEFAULT_DATA_4,
+ PROGRESS_BAR_TYPE,
+} from "../../static-viz/components/ProgressBar/constants";
+import {
+ TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_WATERFALL_CHART_TYPE,
+} from "../../static-viz/components/TimeSeriesWaterfallChart/constants";
+import {
+ CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_WATERFALL_CHART_TYPE,
+} from "../../static-viz/components/CategoricalWaterfallChart/constants";
+import {
+ FUNNEL_CHART_DEFAULT_OPTIONS,
+ FUNNEL_CHART_TYPE,
+} from "../../static-viz/components/FunnelChart/constants";
+import {
+ LINE_AREA_BAR_CHART_TYPE,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_1,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_2,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_3,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_4,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_5,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_6,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_7,
+} from "../../static-viz/components/LineAreaBarChart/constants";
+
+function setAccessorsForChartOptions(index, options) {
+ const optionsCopy = { ...options };
+ if (STATIC_CHART_DEFAULT_OPTIONS[index].accessors) {
+ optionsCopy.accessors = STATIC_CHART_DEFAULT_OPTIONS[index].accessors;
+ }
+ return optionsCopy;
+}
+
+function chartOptionsToStr(options) {
+ if (typeof options === "object") {
+ return JSON.stringify(options, null, 2);
+ }
+ return String(options);
+}
export default function StaticVizPage() {
+ const [staticChartTypeIndex, setStaticChartTypeIndex] = useState(-1);
+ const [staticChartType, setStaticChartType] = useState(null);
+ const [staticChartCustomOptions, setStaticChartCustomOptions] = useState(
+ null,
+ );
+ const [staticChartError, setStaticChartError] = useState(null);
+
+ function chartOptionsToObj(optionsStr) {
+ try {
+ const chartOptions = JSON.parse(optionsStr);
+ delete chartOptions["accessors"];
+ setStaticChartError(null);
+ return chartOptions;
+ } catch (err) {
+ console.error(err);
+ setStaticChartError(err.toString());
+ }
+ return optionsStr;
+ }
+
return (
<PageRoot>
<div className="wrapper wrapper--trim">
@@ -19,427 +114,151 @@ export default function StaticVizPage() {
see updates.
</Text>
+ <PageSection>
+ <Subhead>Chart tester</Subhead>
+
+ <select
+ className="w-full mt1"
+ onChange={e => {
+ const index = parseInt(e.target.value);
+ setStaticChartTypeIndex(index);
+ setStaticChartType(STATIC_CHART_TYPES[index]);
+ const chartOptions = { ...STATIC_CHART_DEFAULT_OPTIONS[index] };
+ delete chartOptions["accessors"];
+ setStaticChartCustomOptions(chartOptions);
+ }}
+ >
+ <option id="">---</option>
+ {STATIC_CHART_TYPES.map((chartType, chartTypeIndex) => (
+ <option key={chartType} value={chartTypeIndex}>
+ {chartType}
+ </option>
+ ))}
+ </select>
+
+ {(staticChartCustomOptions ||
+ typeof staticChartCustomOptions === "string") && (
+ <textarea
+ className="w-full mt1"
+ value={chartOptionsToStr(staticChartCustomOptions)}
+ onChange={e => {
+ const chartOptionsStr = e.target.value;
+ if (chartOptionsStr.length > 0) {
+ setStaticChartCustomOptions(
+ chartOptionsToObj(chartOptionsStr),
+ );
+ } else {
+ setStaticChartCustomOptions(chartOptionsStr);
+ }
+ }}
+ />
+ )}
+
+ {staticChartError && (
+ <p className="text-bold text-error mt1 mb0">{staticChartError}</p>
+ )}
+
+ {!staticChartError && staticChartType && staticChartCustomOptions && (
+ <div className="text-code-plain w-full mt1">
+ <StaticChart
+ type={staticChartType}
+ options={setAccessorsForChartOptions(
+ staticChartTypeIndex,
+ staticChartCustomOptions,
+ )}
+ />
+ </div>
+ )}
+ </PageSection>
+
<PageSection>
<Subhead>Line chart with timeseries data</Subhead>
<StaticChart
- type="timeseries/line"
- options={{
- data: [
- ["2020-01-10", 10],
- ["2020-06-10", 60],
- ["2020-12-10", 80],
- ],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
- labels: {
- left: "Count",
- bottom: "Created At",
- },
- }}
+ type={TIME_SERIES_LINE_CHART_TYPE}
+ options={TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Area chart with timeseries data</Subhead>
<StaticChart
- type="timeseries/area"
- options={{
- data: [
- ["2020-01-10", 10],
- ["2020-06-10", 60],
- ["2020-12-10", 80],
- ],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
- settings: {
- x: {
- date_style: "MMM",
- },
- },
- labels: {
- left: "Count",
- bottom: "Created At",
- },
- colors: {
- brand: "#88BF4D",
- },
- }}
+ type={TIME_SERIES_AREA_CHART_TYPE}
+ options={TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Bar chart with timeseries data</Subhead>
<StaticChart
- type="timeseries/bar"
- options={{
- data: [
- ["2020-10-21", 20],
- ["2020-10-22", 30],
- ["2020-10-23", 25],
- ["2020-10-24", 10],
- ["2020-10-25", 15],
- ],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
- settings: {
- x: {
- date_style: "MM/DD/YYYY",
- },
- y: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 0,
- },
- },
- labels: {
- left: "Price",
- bottom: "Created At",
- },
- }}
+ type={TIME_SERIES_BAR_CHART_TYPE}
+ options={TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Line chart with categorical data</Subhead>
<StaticChart
- type="categorical/line"
- options={{
- data: [
- ["Alden Sparks", 70],
- ["Areli Guerra", 30],
- ["Arturo Hopkins", 80],
- ["Beatrice Lane", 120],
- ["Brylee Davenport", 100],
- ["Cali Nixon", 60],
- ["Dane Terrell", 150],
- ["Deshawn Rollins", 40],
- ["Isabell Bright", 70],
- ["Kaya Rowe", 20],
- ["Roderick Herman", 50],
- ["Ruth Dougherty", 75],
- ],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
- labels: {
- left: "Tasks",
- bottom: "People",
- },
- }}
+ type={CATEGORICAL_LINE_CHART_TYPE}
+ options={CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Area chart with categorical data</Subhead>
<StaticChart
- type="categorical/area"
- options={{
- data: [
- ["Alden Sparks", 70],
- ["Areli Guerra", 30],
- ["Arturo Hopkins", 80],
- ["Beatrice Lane", 120],
- ["Brylee Davenport", 100],
- ["Cali Nixon", 60],
- ["Dane Terrell", 150],
- ["Deshawn Rollins", 40],
- ["Isabell Bright", 70],
- ["Kaya Rowe", 20],
- ["Roderick Herman", 50],
- ["Ruth Dougherty", 75],
- ],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
- labels: {
- left: "Tasks",
- bottom: "People",
- },
- }}
+ type={CATEGORICAL_AREA_CHART_TYPE}
+ options={CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Bar chart with categorical data</Subhead>
<StaticChart
- type="categorical/bar"
- options={{
- data: [
- ["Alden Sparks", 70],
- ["Areli Guerra", 30],
- ["Arturo Hopkins", 80],
- ["Beatrice Lane", 120],
- ["Brylee Davenport", 100],
- ["Cali Nixon", 60],
- ["Dane Terrell", 150],
- ["Deshawn Rollins", 40],
- ["Isabell Bright", 70],
- ["Kaya Rowe", 20],
- ["Roderick Herman", 50],
- ["Ruth Dougherty", 75],
- ],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
- labels: {
- left: "Tasks",
- bottom: "People",
- },
- }}
+ type={CATEGORICAL_BAR_CHART_TYPE}
+ options={CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Donut chart with categorical data</Subhead>
<StaticChart
- type="categorical/donut"
- options={{
- data: [
- ["donut", 2000],
- ["cronut", 3100],
- ],
- colors: {
- donut: "#509EE3",
- cronut: "#DDECFA",
- },
- accessors: {
- dimension: row => row[0],
- metric: row => row[1],
- },
- }}
+ type={CATEGORICAL_DONUT_CHART_TYPE}
+ options={CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Progress bar</Subhead>
<StaticChart
- type="progress"
- options={{
- data: {
- value: 0,
- goal: 100000,
- },
- settings: {
- format: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 0,
- },
- color: "#84BB4C",
- },
- }}
+ type={PROGRESS_BAR_TYPE}
+ options={PROGRESS_BAR_DEFAULT_DATA_1}
/>
<StaticChart
- type="progress"
- options={{
- data: {
- value: 30000,
- goal: 100000,
- },
- settings: {
- format: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 0,
- },
- color: "#84BB4C",
- },
- }}
+ type={PROGRESS_BAR_TYPE}
+ options={PROGRESS_BAR_DEFAULT_DATA_2}
/>
<StaticChart
- type="progress"
- options={{
- data: {
- value: 100000,
- goal: 100000,
- },
- settings: {
- format: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 0,
- },
- color: "#84BB4C",
- },
- }}
+ type={PROGRESS_BAR_TYPE}
+ options={PROGRESS_BAR_DEFAULT_DATA_3}
/>
<StaticChart
- type="progress"
- options={{
- data: {
- value: 135000,
- goal: 100000,
- },
- settings: {
- format: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 0,
- },
- color: "#84BB4C",
- },
- }}
+ type={PROGRESS_BAR_TYPE}
+ options={PROGRESS_BAR_DEFAULT_DATA_4}
/>
</PageSection>
<PageSection>
<Subhead>Waterfall chart with timeseries data and no total</Subhead>
<StaticChart
- type="timeseries/waterfall"
- options={{
- data: [
- ["2020-10-20", 20],
- ["2020-10-21", 20],
- ["2020-10-22", 100],
- ["2020-10-23", -10],
- ["2020-10-24", 20],
- ["2020-10-25", -30],
- ["2020-10-26", -10],
- ["2020-10-27", 20],
- ["2020-10-28", -15],
- ],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
- labels: {
- left: "Count",
- bottom: "Created At",
- },
- }}
+ type={TIME_SERIES_WATERFALL_CHART_TYPE}
+ options={TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Waterfall chart with categorical data and total</Subhead>
<StaticChart
- type="categorical/waterfall"
- options={{
- data: [
- ["Stage 1", 800],
- ["Stage 2", 400],
- ["Stage 3", -300],
- ["Stage 4", -100],
- ["Stage 5", -50],
- ["Stage 6", 200],
- ["Stage 7", -100],
- ["Stage 8", 300],
- ["Stage 9", 100],
- ["Stage 10", -300],
- ],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
- settings: {
- showTotal: true,
- },
- labels: {
- left: "Count",
- bottom: "Created At",
- },
- }}
+ type={CATEGORICAL_WATERFALL_CHART_TYPE}
+ options={CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
<PageSection>
<Subhead>Line/Area/Bar chart with multiple series</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- goal: {
- value: 140,
- label: "Goal",
- },
- x: {
- type: "timeseries",
- },
- y: {
- type: "linear",
- },
- labels: {
- left: "Count",
- right: "Sum",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "line series",
- color: "#509ee3",
- yAxisPosition: "left",
- type: "line",
- data: [
- ["2020-10-20", 15],
- ["2020-10-21", 20],
- ["2020-10-22", 35],
- ["2020-10-23", 40],
- ["2020-10-24", 55],
- ["2020-10-25", 60],
- ["2020-10-26", 75],
- ["2020-10-27", 80],
- ["2020-10-28", 95],
- ],
- },
- {
- name: "bar series 1",
- color: "#88bf4d",
- yAxisPosition: "left",
- type: "bar",
- data: [
- ["2020-10-20", 90],
- ["2020-10-21", 80],
- ["2020-10-22", 70],
- ["2020-10-23", 60],
- ["2020-10-24", 50],
- ["2020-10-25", 40],
- ["2020-10-26", 30],
- ["2020-10-27", 20],
- ["2020-10-28", 10],
- ],
- },
- {
- name: "bar series 2 with a really really really long name",
- color: "#a989c5",
- yAxisPosition: "right",
- type: "bar",
- data: [
- ["2020-10-20", 4],
- ["2020-10-21", 5],
- ["2020-10-22", 6],
- ["2020-10-23", 7],
- ["2020-10-24", 6],
- ["2020-10-25", 5],
- ["2020-10-26", 4],
- ["2020-10-27", 3],
- ["2020-10-28", 2],
- ],
- },
- {
- name: "area series",
- color: "#ef8c8c",
- yAxisPosition: "right",
- type: "area",
- data: [
- ["2020-10-20", 4],
- ["2020-10-21", 5],
- ["2020-10-22", 3],
- ["2020-10-23", 4],
- ["2020-10-24", 5],
- ["2020-10-25", 8],
- ["2020-10-26", 9],
- ["2020-10-27", 12],
- ["2020-10-28", 15],
- ],
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_1}
/>
</PageSection>
@@ -449,81 +268,8 @@ export default function StaticVizPage() {
right Y-axis
</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- x: {
- type: "timeseries",
- },
- y: {
- type: "linear",
- format: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 2,
- },
- },
- labels: {
- right: "Sum",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "line series",
- color: "#509ee3",
- yAxisPosition: "right",
- type: "line",
- data: [
- ["2020-10-18", -65],
- ["2020-10-19", -55],
- ["2020-10-20", -45],
- ["2020-10-21", -30],
- ["2020-10-22", -25],
- ["2020-10-23", -10],
- ["2020-10-24", 0],
- ["2020-10-25", 10],
- ["2020-10-26", 20],
- ["2020-10-27", 80],
- ],
- },
- {
- name: "bar series",
- color: "#88bf4d",
- yAxisPosition: "right",
- type: "bar",
- data: [
- ["2020-10-20", -90],
- ["2020-10-21", -80],
- ["2020-10-22", -70],
- ["2020-10-23", -60],
- ["2020-10-24", 10],
- ["2020-10-25", 20],
- ["2020-10-26", 30],
- ["2020-10-27", 40],
- ["2020-10-28", 50],
- ],
- },
- {
- name: "area series",
- color: "#ef8c8c",
- yAxisPosition: "right",
- type: "area",
- data: [
- ["2020-10-22", 13],
- ["2020-10-23", 10],
- ["2020-10-24", 5],
- ["2020-10-25", -8],
- ["2020-10-26", -9],
- ["2020-10-27", -22],
- ["2020-10-28", -85],
- ["2020-10-29", -100],
- ["2020-10-30", -120],
- ],
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_2}
/>
</PageSection>
@@ -532,271 +278,48 @@ export default function StaticVizPage() {
Combo chart with ordinal X-axis and more than 10 ticks
</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- goal: {
- value: 120,
- label: "Goal",
- },
- x: {
- type: "ordinal",
- },
- y: {
- type: "linear",
- },
- labels: {
- left: "Count",
- right: "Sum",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "line series",
- color: "#509ee3",
- yAxisPosition: "left",
- type: "line",
- data: [
- ["Alden Sparks", 70],
- ["Areli Guerra", 30],
- ["Arturo Hopkins", 80],
- ["Beatrice Lane", 120],
- ["Brylee Davenport", 100],
- ["Cali Nixon", 60],
- ["Dane Terrell", 150],
- ["Deshawn Rollins", 40],
- ["Isabell Bright", 70],
- ["Kaya Rowe", 20],
- ["Roderick Herman", 50],
- ["Ruth Dougherty", 75],
- ],
- },
- {
- name: "bar series 1",
- color: "#88bf4d",
- yAxisPosition: "left",
- type: "bar",
- data: [
- ["Alden Sparks", 20],
- ["Areli Guerra", 80],
- ["Arturo Hopkins", 10],
- ["Beatrice Lane", 10],
- ["Brylee Davenport", 15],
- ["Cali Nixon", 20],
- ["Dane Terrell", 40],
- ["Deshawn Rollins", 60],
- ["Isabell Bright", 80],
- ["Kaya Rowe", 50],
- ["Roderick Herman", 40],
- ["Ruth Dougherty", 65],
- ],
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_3}
/>
</PageSection>
<PageSection>
<Subhead>Stacked area chart</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- stacking: "stack",
- x: {
- type: "timeseries",
- },
- y: {
- type: "linear",
- format: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- decimals: 2,
- },
- },
- labels: {
- left: "Sum",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "series 1",
- color: "#509ee3",
- yAxisPosition: "left",
- type: "area",
- data: [
- ["2020-10-18", 10],
- ["2020-10-19", 20],
- ["2020-10-20", 30],
- ["2020-10-21", 40],
- ["2020-10-22", 45],
- ["2020-10-23", 55],
- ],
- },
- {
- name: "series 2",
- color: "#a989c5",
- yAxisPosition: "left",
- type: "area",
- data: [
- ["2020-10-18", 10],
- ["2020-10-19", 40],
- ["2020-10-20", 80],
- ["2020-10-21", 60],
- ["2020-10-22", 70],
- ["2020-10-23", 65],
- ],
- },
- {
- name: "series 3",
- color: "#ef8c8c",
- yAxisPosition: "left",
- type: "area",
- data: [
- ["2020-10-18", -40],
- ["2020-10-19", -20],
- ["2020-10-20", -10],
- ["2020-10-21", -20],
- ["2020-10-22", -45],
- ["2020-10-23", -55],
- ],
- },
- {
- name: "series 4",
- color: "#88bf4d",
- yAxisPosition: "left",
- type: "area",
- data: [
- ["2020-10-18", -40],
- ["2020-10-19", -50],
- ["2020-10-20", -60],
- ["2020-10-21", -20],
- ["2020-10-22", -10],
- ["2020-10-23", -5],
- ],
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_4}
/>
</PageSection>
<PageSection>
<Subhead>Ordinal chart with 48 items</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- x: {
- type: "ordinal",
- },
- y: {
- type: "linear",
- },
- labels: {
- left: "Count",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "bar series",
- color: "#509ee3",
- yAxisPosition: "left",
- type: "bar",
- data: _.range(48).map(n => [`bar ${n + 1}`, n + 1]),
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_5}
/>
</PageSection>
<PageSection>
<Subhead>Ordinal chart with 200 items</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- x: {
- type: "ordinal",
- },
- y: {
- type: "linear",
- },
- labels: {
- left: "Count",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "bar series",
- color: "#509ee3",
- yAxisPosition: "left",
- type: "bar",
- data: _.range(200).map(n => [`bar ${n + 1}`, n + 1]),
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_6}
/>
</PageSection>
<PageSection>
<Subhead>Ordinal chart with 20 items</Subhead>
<StaticChart
- type="combo-chart"
- options={{
- settings: {
- x: {
- type: "ordinal",
- },
- y: {
- type: "linear",
- },
- labels: {
- left: "Count",
- bottom: "Date",
- },
- },
- series: [
- {
- name: "bar series",
- color: "#509ee3",
- yAxisPosition: "left",
- type: "bar",
- data: _.range(20).map(n => [`bar ${n + 1}`, n + 1]),
- },
- ],
- }}
+ type={LINE_AREA_BAR_CHART_TYPE}
+ options={LINE_AREA_BAR_DEFAULT_OPTIONS_7}
/>
</PageSection>
<PageSection>
<Subhead>Funnel</Subhead>
<StaticChart
- type="funnel"
- options={{
- data: [
- ["Visitors", 1000],
- ["Started sign up", 300],
- ["Finished sign up", 200],
- ["Opened app", 195],
- ["Finished onboarding", 150],
- ["Activated", 25],
- ],
- settings: {
- step: {
- name: "Step",
- },
- measure: {
- format: {
- suffix: "k",
- },
- },
- },
- }}
+ type={FUNNEL_CHART_TYPE}
+ options={FUNNEL_CHART_DEFAULT_OPTIONS}
/>
</PageSection>
</div>
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
new file mode 100644
index 00000000000..53f112b1451
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
@@ -0,0 +1,26 @@
+export const CATEGORICAL_AREA_CHART_TYPE = "categorical/area";
+
+export const CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["Alden Sparks", 70],
+ ["Areli Guerra", 30],
+ ["Arturo Hopkins", 80],
+ ["Beatrice Lane", 120],
+ ["Brylee Davenport", 100],
+ ["Cali Nixon", 60],
+ ["Dane Terrell", 150],
+ ["Deshawn Rollins", 40],
+ ["Isabell Bright", 70],
+ ["Kaya Rowe", 20],
+ ["Roderick Herman", 50],
+ ["Ruth Dougherty", 75],
+ ],
+ accessors: {
+ x: (row: any[]) => row[0],
+ y: (row: any[]) => row[1],
+ },
+ labels: {
+ left: "Tasks",
+ bottom: "People",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
new file mode 100644
index 00000000000..b47a9a30bb5
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
@@ -0,0 +1,26 @@
+export const CATEGORICAL_BAR_CHART_TYPE = "categorical/bar";
+
+export const CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["Alden Sparks", 70],
+ ["Areli Guerra", 30],
+ ["Arturo Hopkins", 80],
+ ["Beatrice Lane", 120],
+ ["Brylee Davenport", 100],
+ ["Cali Nixon", 60],
+ ["Dane Terrell", 150],
+ ["Deshawn Rollins", 40],
+ ["Isabell Bright", 70],
+ ["Kaya Rowe", 20],
+ ["Roderick Herman", 50],
+ ["Ruth Dougherty", 75],
+ ],
+ accessors: {
+ x: (row: any[]) => row[0],
+ y: (row: any[]) => row[1],
+ },
+ labels: {
+ left: "Tasks",
+ bottom: "People",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts
new file mode 100644
index 00000000000..33ebfabab2c
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts
@@ -0,0 +1,16 @@
+export const CATEGORICAL_DONUT_CHART_TYPE = "categorical/donut";
+
+export const CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["donut", 2000],
+ ["cronut", 3100],
+ ],
+ colors: {
+ donut: "#509EE3",
+ cronut: "#DDECFA",
+ },
+ accessors: {
+ dimension: (row: any[]) => row[0],
+ metric: (row: any[]) => row[1],
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
new file mode 100644
index 00000000000..b9841b185f0
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
@@ -0,0 +1,26 @@
+export const CATEGORICAL_LINE_CHART_TYPE = "categorical/line";
+
+export const CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["Alden Sparks", 70],
+ ["Areli Guerra", 30],
+ ["Arturo Hopkins", 80],
+ ["Beatrice Lane", 120],
+ ["Brylee Davenport", 100],
+ ["Cali Nixon", 60],
+ ["Dane Terrell", 150],
+ ["Deshawn Rollins", 40],
+ ["Isabell Bright", 70],
+ ["Kaya Rowe", 20],
+ ["Roderick Herman", 50],
+ ["Ruth Dougherty", 75],
+ ],
+ accessors: {
+ x: (row: any[]) => row[0],
+ y: (row: any[]) => row[1],
+ },
+ labels: {
+ left: "Tasks",
+ bottom: "People",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts
new file mode 100644
index 00000000000..9d2e7b4f827
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts
@@ -0,0 +1,27 @@
+export const CATEGORICAL_WATERFALL_CHART_TYPE = "categorical/waterfall";
+
+export const CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["Stage 1", 800],
+ ["Stage 2", 400],
+ ["Stage 3", -300],
+ ["Stage 4", -100],
+ ["Stage 5", -50],
+ ["Stage 6", 200],
+ ["Stage 7", -100],
+ ["Stage 8", 300],
+ ["Stage 9", 100],
+ ["Stage 10", -300],
+ ],
+ accessors: {
+ x: (row: any[]) => row[0],
+ y: (row: any[]) => row[1],
+ },
+ settings: {
+ showTotal: true,
+ },
+ labels: {
+ left: "Count",
+ bottom: "Created At",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/FunnelChart/constants.ts b/frontend/src/metabase/static-viz/components/FunnelChart/constants.ts
new file mode 100644
index 00000000000..e424caeeb8a
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/FunnelChart/constants.ts
@@ -0,0 +1,22 @@
+export const FUNNEL_CHART_TYPE = "funnel";
+
+export const FUNNEL_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["Visitors", 1000],
+ ["Started sign up", 300],
+ ["Finished sign up", 200],
+ ["Opened app", 195],
+ ["Finished onboarding", 150],
+ ["Activated", 25],
+ ],
+ settings: {
+ step: {
+ name: "Step",
+ },
+ measure: {
+ format: {
+ suffix: "k",
+ },
+ },
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/LineAreaBarChart/constants.ts b/frontend/src/metabase/static-viz/components/LineAreaBarChart/constants.ts
new file mode 100644
index 00000000000..12174acd68c
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/LineAreaBarChart/constants.ts
@@ -0,0 +1,382 @@
+import _ from "underscore";
+
+export const LINE_AREA_BAR_CHART_TYPE = "combo-chart";
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_1 = {
+ settings: {
+ goal: {
+ value: 140,
+ label: "Goal",
+ },
+ x: {
+ type: "timeseries",
+ },
+ y: {
+ type: "linear",
+ },
+ labels: {
+ left: "Count",
+ right: "Sum",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "line series",
+ color: "#509ee3",
+ yAxisPosition: "left",
+ type: "line",
+ data: [
+ ["2020-10-20", 15],
+ ["2020-10-21", 20],
+ ["2020-10-22", 35],
+ ["2020-10-23", 40],
+ ["2020-10-24", 55],
+ ["2020-10-25", 60],
+ ["2020-10-26", 75],
+ ["2020-10-27", 80],
+ ["2020-10-28", 95],
+ ],
+ },
+ {
+ name: "bar series 1",
+ color: "#88bf4d",
+ yAxisPosition: "left",
+ type: "bar",
+ data: [
+ ["2020-10-20", 90],
+ ["2020-10-21", 80],
+ ["2020-10-22", 70],
+ ["2020-10-23", 60],
+ ["2020-10-24", 50],
+ ["2020-10-25", 40],
+ ["2020-10-26", 30],
+ ["2020-10-27", 20],
+ ["2020-10-28", 10],
+ ],
+ },
+ {
+ name: "bar series 2 with a really really really long name",
+ color: "#a989c5",
+ yAxisPosition: "right",
+ type: "bar",
+ data: [
+ ["2020-10-20", 4],
+ ["2020-10-21", 5],
+ ["2020-10-22", 6],
+ ["2020-10-23", 7],
+ ["2020-10-24", 6],
+ ["2020-10-25", 5],
+ ["2020-10-26", 4],
+ ["2020-10-27", 3],
+ ["2020-10-28", 2],
+ ],
+ },
+ {
+ name: "area series",
+ color: "#ef8c8c",
+ yAxisPosition: "right",
+ type: "area",
+ data: [
+ ["2020-10-20", 4],
+ ["2020-10-21", 5],
+ ["2020-10-22", 3],
+ ["2020-10-23", 4],
+ ["2020-10-24", 5],
+ ["2020-10-25", 8],
+ ["2020-10-26", 9],
+ ["2020-10-27", 12],
+ ["2020-10-28", 15],
+ ],
+ },
+ ],
+};
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_2 = {
+ settings: {
+ x: {
+ type: "timeseries",
+ },
+ y: {
+ type: "linear",
+ format: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 2,
+ },
+ },
+ labels: {
+ right: "Sum",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "line series",
+ color: "#509ee3",
+ yAxisPosition: "right",
+ type: "line",
+ data: [
+ ["2020-10-18", -65],
+ ["2020-10-19", -55],
+ ["2020-10-20", -45],
+ ["2020-10-21", -30],
+ ["2020-10-22", -25],
+ ["2020-10-23", -10],
+ ["2020-10-24", 0],
+ ["2020-10-25", 10],
+ ["2020-10-26", 20],
+ ["2020-10-27", 80],
+ ],
+ },
+ {
+ name: "bar series",
+ color: "#88bf4d",
+ yAxisPosition: "right",
+ type: "bar",
+ data: [
+ ["2020-10-20", -90],
+ ["2020-10-21", -80],
+ ["2020-10-22", -70],
+ ["2020-10-23", -60],
+ ["2020-10-24", 10],
+ ["2020-10-25", 20],
+ ["2020-10-26", 30],
+ ["2020-10-27", 40],
+ ["2020-10-28", 50],
+ ],
+ },
+ {
+ name: "area series",
+ color: "#ef8c8c",
+ yAxisPosition: "right",
+ type: "area",
+ data: [
+ ["2020-10-22", 13],
+ ["2020-10-23", 10],
+ ["2020-10-24", 5],
+ ["2020-10-25", -8],
+ ["2020-10-26", -9],
+ ["2020-10-27", -22],
+ ["2020-10-28", -85],
+ ["2020-10-29", -100],
+ ["2020-10-30", -120],
+ ],
+ },
+ ],
+};
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_3 = {
+ settings: {
+ goal: {
+ value: 120,
+ label: "Goal",
+ },
+ x: {
+ type: "ordinal",
+ },
+ y: {
+ type: "linear",
+ },
+ labels: {
+ left: "Count",
+ right: "Sum",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "line series",
+ color: "#509ee3",
+ yAxisPosition: "left",
+ type: "line",
+ data: [
+ ["Alden Sparks", 70],
+ ["Areli Guerra", 30],
+ ["Arturo Hopkins", 80],
+ ["Beatrice Lane", 120],
+ ["Brylee Davenport", 100],
+ ["Cali Nixon", 60],
+ ["Dane Terrell", 150],
+ ["Deshawn Rollins", 40],
+ ["Isabell Bright", 70],
+ ["Kaya Rowe", 20],
+ ["Roderick Herman", 50],
+ ["Ruth Dougherty", 75],
+ ],
+ },
+ {
+ name: "bar series 1",
+ color: "#88bf4d",
+ yAxisPosition: "left",
+ type: "bar",
+ data: [
+ ["Alden Sparks", 20],
+ ["Areli Guerra", 80],
+ ["Arturo Hopkins", 10],
+ ["Beatrice Lane", 10],
+ ["Brylee Davenport", 15],
+ ["Cali Nixon", 20],
+ ["Dane Terrell", 40],
+ ["Deshawn Rollins", 60],
+ ["Isabell Bright", 80],
+ ["Kaya Rowe", 50],
+ ["Roderick Herman", 40],
+ ["Ruth Dougherty", 65],
+ ],
+ },
+ ],
+};
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_4 = {
+ settings: {
+ stacking: "stack",
+ x: {
+ type: "timeseries",
+ },
+ y: {
+ type: "linear",
+ format: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 2,
+ },
+ },
+ labels: {
+ left: "Sum",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "series 1",
+ color: "#509ee3",
+ yAxisPosition: "left",
+ type: "area",
+ data: [
+ ["2020-10-18", 10],
+ ["2020-10-19", 20],
+ ["2020-10-20", 30],
+ ["2020-10-21", 40],
+ ["2020-10-22", 45],
+ ["2020-10-23", 55],
+ ],
+ },
+ {
+ name: "series 2",
+ color: "#a989c5",
+ yAxisPosition: "left",
+ type: "area",
+ data: [
+ ["2020-10-18", 10],
+ ["2020-10-19", 40],
+ ["2020-10-20", 80],
+ ["2020-10-21", 60],
+ ["2020-10-22", 70],
+ ["2020-10-23", 65],
+ ],
+ },
+ {
+ name: "series 3",
+ color: "#ef8c8c",
+ yAxisPosition: "left",
+ type: "area",
+ data: [
+ ["2020-10-18", -40],
+ ["2020-10-19", -20],
+ ["2020-10-20", -10],
+ ["2020-10-21", -20],
+ ["2020-10-22", -45],
+ ["2020-10-23", -55],
+ ],
+ },
+ {
+ name: "series 4",
+ color: "#88bf4d",
+ yAxisPosition: "left",
+ type: "area",
+ data: [
+ ["2020-10-18", -40],
+ ["2020-10-19", -50],
+ ["2020-10-20", -60],
+ ["2020-10-21", -20],
+ ["2020-10-22", -10],
+ ["2020-10-23", -5],
+ ],
+ },
+ ],
+};
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_5 = {
+ settings: {
+ x: {
+ type: "ordinal",
+ },
+ y: {
+ type: "linear",
+ },
+ labels: {
+ left: "Count",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "bar series",
+ color: "#509ee3",
+ yAxisPosition: "left",
+ type: "bar",
+ data: _.range(48).map(n => [`bar ${n + 1}`, n + 1]),
+ },
+ ],
+};
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_6 = {
+ settings: {
+ x: {
+ type: "ordinal",
+ },
+ y: {
+ type: "linear",
+ },
+ labels: {
+ left: "Count",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "bar series",
+ color: "#509ee3",
+ yAxisPosition: "left",
+ type: "bar",
+ data: _.range(200).map(n => [`bar ${n + 1}`, n + 1]),
+ },
+ ],
+};
+
+export const LINE_AREA_BAR_DEFAULT_OPTIONS_7 = {
+ settings: {
+ x: {
+ type: "ordinal",
+ },
+ y: {
+ type: "linear",
+ },
+ labels: {
+ left: "Count",
+ bottom: "Date",
+ },
+ },
+ series: [
+ {
+ name: "bar series",
+ color: "#509ee3",
+ yAxisPosition: "left",
+ type: "bar",
+ data: _.range(20).map(n => [`bar ${n + 1}`, n + 1]),
+ },
+ ],
+};
diff --git a/frontend/src/metabase/static-viz/components/ProgressBar/constants.ts b/frontend/src/metabase/static-viz/components/ProgressBar/constants.ts
new file mode 100644
index 00000000000..8d271655ff8
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/ProgressBar/constants.ts
@@ -0,0 +1,65 @@
+export const PROGRESS_BAR_TYPE = "progress";
+
+export const PROGRESS_BAR_DEFAULT_DATA_1 = {
+ data: {
+ value: 0,
+ goal: 100000,
+ },
+ settings: {
+ format: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 0,
+ },
+ color: "#84BB4C",
+ },
+};
+
+export const PROGRESS_BAR_DEFAULT_DATA_2 = {
+ data: {
+ value: 30000,
+ goal: 100000,
+ },
+ settings: {
+ format: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 0,
+ },
+ color: "#84BB4C",
+ },
+};
+
+export const PROGRESS_BAR_DEFAULT_DATA_3 = {
+ data: {
+ value: 100000,
+ goal: 100000,
+ },
+ settings: {
+ format: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 0,
+ },
+ color: "#84BB4C",
+ },
+};
+
+export const PROGRESS_BAR_DEFAULT_DATA_4 = {
+ data: {
+ value: 135000,
+ goal: 100000,
+ },
+ settings: {
+ format: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 0,
+ },
+ color: "#84BB4C",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
new file mode 100644
index 00000000000..afd34664832
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
@@ -0,0 +1,25 @@
+export const TIME_SERIES_AREA_CHART_TYPE = "timeseries/area";
+
+export const TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["2020-01-10", 10],
+ ["2020-06-10", 60],
+ ["2020-12-10", 80],
+ ],
+ accessors: {
+ x: (row: any[]) => new Date(row[0]).valueOf(),
+ y: (row: any[]) => row[1],
+ },
+ settings: {
+ x: {
+ date_style: "MMM",
+ },
+ },
+ labels: {
+ left: "Count",
+ bottom: "Created At",
+ },
+ colors: {
+ brand: "#88BF4D",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
new file mode 100644
index 00000000000..1b0db0c7055
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
@@ -0,0 +1,30 @@
+export const TIME_SERIES_BAR_CHART_TYPE = "timeseries/bar";
+
+export const TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["2020-10-21", 20],
+ ["2020-10-22", 30],
+ ["2020-10-23", 25],
+ ["2020-10-24", 10],
+ ["2020-10-25", 15],
+ ],
+ accessors: {
+ x: (row: any[]) => new Date(row[0]).valueOf(),
+ y: (row: any[]) => row[1],
+ },
+ settings: {
+ x: {
+ date_style: "MM/DD/YYYY",
+ },
+ y: {
+ number_style: "currency",
+ currency: "USD",
+ currency_style: "symbol",
+ decimals: 0,
+ },
+ },
+ labels: {
+ left: "Price",
+ bottom: "Created At",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
new file mode 100644
index 00000000000..4f595df27e4
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
@@ -0,0 +1,17 @@
+export const TIME_SERIES_LINE_CHART_TYPE = "timeseries/line";
+
+export const TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["2020-01-10", 10],
+ ["2020-06-10", 60],
+ ["2020-12-10", 80],
+ ],
+ accessors: {
+ x: (row: any[]) => new Date(row[0]).valueOf(),
+ y: (row: any[]) => row[1],
+ },
+ labels: {
+ left: "Count",
+ bottom: "Created At",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts
new file mode 100644
index 00000000000..1fa1da3ed63
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts
@@ -0,0 +1,23 @@
+export const TIME_SERIES_WATERFALL_CHART_TYPE = "timeseries/waterfall";
+
+export const TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS = {
+ data: [
+ ["2020-10-20", 20],
+ ["2020-10-21", 20],
+ ["2020-10-22", 100],
+ ["2020-10-23", -10],
+ ["2020-10-24", 20],
+ ["2020-10-25", -30],
+ ["2020-10-26", -10],
+ ["2020-10-27", 20],
+ ["2020-10-28", -15],
+ ],
+ accessors: {
+ x: (row: any[]) => new Date(row[0]).valueOf(),
+ y: (row: any[]) => row[1],
+ },
+ labels: {
+ left: "Count",
+ bottom: "Created At",
+ },
+};
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.jsx b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.jsx
deleted file mode 100644
index 742d84aae22..00000000000
--- a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import CategoricalAreaChart from "../../components/CategoricalAreaChart";
-import CategoricalBarChart from "../../components/CategoricalBarChart";
-import CategoricalDonutChart from "../../components/CategoricalDonutChart";
-import CategoricalLineChart from "../../components/CategoricalLineChart";
-import CategoricalWaterfallChart from "../../components/CategoricalWaterfallChart";
-import TimeSeriesAreaChart from "../../components/TimeSeriesAreaChart";
-import TimeSeriesBarChart from "../../components/TimeSeriesBarChart";
-import TimeSeriesLineChart from "../../components/TimeSeriesLineChart";
-import ProgressBar from "../../components/ProgressBar";
-import Funnel from "../../components/FunnelChart";
-import TimeSeriesWaterfallChart from "../../components/TimeSeriesWaterfallChart";
-import LineAreaBarChart from "../../components/LineAreaBarChart";
-
-const propTypes = {
- type: PropTypes.oneOf([
- "categorical/area",
- "categorical/bar",
- "categorical/donut",
- "categorical/line",
- "categorical/waterfall",
- "timeseries/area",
- "timeseries/bar",
- "timeseries/line",
- "timeseries/waterfall",
- "progress",
- "combo-chart",
- "funnel",
- ]).isRequired,
- options: PropTypes.object.isRequired,
-};
-
-const StaticChart = ({ type, options }) => {
- switch (type) {
- case "categorical/area":
- return <CategoricalAreaChart {...options} />;
- case "categorical/bar":
- return <CategoricalBarChart {...options} />;
- case "categorical/donut":
- return <CategoricalDonutChart {...options} />;
- case "categorical/line":
- return <CategoricalLineChart {...options} />;
- case "categorical/waterfall":
- return <CategoricalWaterfallChart {...options} />;
- case "timeseries/area":
- return <TimeSeriesAreaChart {...options} />;
- case "timeseries/bar":
- return <TimeSeriesBarChart {...options} />;
- case "timeseries/line":
- return <TimeSeriesLineChart {...options} />;
- case "timeseries/waterfall":
- return <TimeSeriesWaterfallChart {...options} />;
- case "progress":
- return <ProgressBar {...options} />;
- case "combo-chart":
- return <LineAreaBarChart {...options} />;
- case "funnel":
- return <Funnel {...options} />;
- }
-};
-
-StaticChart.propTypes = propTypes;
-
-export default StaticChart;
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.stories.tsx b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.stories.tsx
new file mode 100644
index 00000000000..f12b3f45359
--- /dev/null
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.stories.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
+import StaticChart from "./StaticChart";
+import { STATIC_CHART_DEFAULT_OPTIONS, STATIC_CHART_TYPES } from "./constants";
+import { StaticChartProps } from "./types";
+
+export default {
+ title: "static-viz/StaticChart",
+ component: StaticChart,
+ argTypes: {
+ type: {
+ control: { type: "select" },
+ options: STATIC_CHART_TYPES,
+ },
+ options: {
+ control: { type: "object" },
+ },
+ },
+};
+
+const Template: ComponentStory<typeof StaticChart> = (
+ args: StaticChartProps,
+) => {
+ const [_, updateArgs] = useArgs();
+
+ let options = args.options;
+ if (args.options.type !== args.type) {
+ options =
+ STATIC_CHART_DEFAULT_OPTIONS[STATIC_CHART_TYPES.indexOf(args.type)];
+ updateArgs({
+ ...args,
+ options: {
+ ...options,
+ type: args.type,
+ },
+ });
+ }
+
+ return <StaticChart type={args.type} options={options} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ type: STATIC_CHART_TYPES[0],
+ options: STATIC_CHART_DEFAULT_OPTIONS[0],
+};
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx
new file mode 100644
index 00000000000..4bd5e7603c9
--- /dev/null
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import CategoricalAreaChart from "../../components/CategoricalAreaChart";
+import { CATEGORICAL_AREA_CHART_TYPE } from "../../components/CategoricalAreaChart/constants";
+import CategoricalBarChart from "../../components/CategoricalBarChart";
+import { CATEGORICAL_BAR_CHART_TYPE } from "../../components/CategoricalBarChart/constants";
+import CategoricalDonutChart from "../../components/CategoricalDonutChart";
+import { CATEGORICAL_DONUT_CHART_TYPE } from "../../components/CategoricalDonutChart/constants";
+import CategoricalLineChart from "../../components/CategoricalLineChart";
+import { CATEGORICAL_LINE_CHART_TYPE } from "../../components/CategoricalLineChart/constants";
+import CategoricalWaterfallChart from "../../components/CategoricalWaterfallChart";
+import { CATEGORICAL_WATERFALL_CHART_TYPE } from "../../components/CategoricalWaterfallChart/constants";
+import TimeSeriesAreaChart from "../../components/TimeSeriesAreaChart";
+import { TIME_SERIES_AREA_CHART_TYPE } from "../../components/TimeSeriesAreaChart/constants";
+import TimeSeriesBarChart from "../../components/TimeSeriesBarChart";
+import { TIME_SERIES_BAR_CHART_TYPE } from "../../components/TimeSeriesBarChart/constants";
+import TimeSeriesLineChart from "../../components/TimeSeriesLineChart";
+import { TIME_SERIES_LINE_CHART_TYPE } from "../../components/TimeSeriesLineChart/constants";
+import TimeSeriesWaterfallChart from "../../components/TimeSeriesWaterfallChart";
+import { TIME_SERIES_WATERFALL_CHART_TYPE } from "../../components/TimeSeriesWaterfallChart/constants";
+import ProgressBar from "../../components/ProgressBar";
+import { PROGRESS_BAR_TYPE } from "../../components/ProgressBar/constants";
+import LineAreaBarChart from "../../components/LineAreaBarChart";
+import { LINE_AREA_BAR_CHART_TYPE } from "../../components/LineAreaBarChart/constants";
+import Funnel from "../../components/FunnelChart";
+import { FUNNEL_CHART_TYPE } from "../../components/FunnelChart/constants";
+import { StaticChartProps } from "./types";
+
+const StaticChart = ({ type, options }: StaticChartProps) => {
+ switch (type) {
+ case CATEGORICAL_AREA_CHART_TYPE:
+ return <CategoricalAreaChart {...options} />;
+ case CATEGORICAL_BAR_CHART_TYPE:
+ return <CategoricalBarChart {...options} />;
+ case CATEGORICAL_DONUT_CHART_TYPE:
+ return <CategoricalDonutChart {...options} />;
+ case CATEGORICAL_LINE_CHART_TYPE:
+ return <CategoricalLineChart {...options} />;
+ case CATEGORICAL_WATERFALL_CHART_TYPE:
+ return <CategoricalWaterfallChart {...options} />;
+ case TIME_SERIES_AREA_CHART_TYPE:
+ return <TimeSeriesAreaChart {...options} />;
+ case TIME_SERIES_BAR_CHART_TYPE:
+ return <TimeSeriesBarChart {...options} />;
+ case TIME_SERIES_LINE_CHART_TYPE:
+ return <TimeSeriesLineChart {...options} />;
+ case TIME_SERIES_WATERFALL_CHART_TYPE:
+ return <TimeSeriesWaterfallChart {...options} />;
+ case PROGRESS_BAR_TYPE:
+ return <ProgressBar {...options} />;
+ case LINE_AREA_BAR_CHART_TYPE:
+ return <LineAreaBarChart {...options} />;
+ case FUNNEL_CHART_TYPE:
+ return <Funnel {...options} />;
+ }
+};
+
+export default StaticChart;
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts b/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts
new file mode 100644
index 00000000000..fff4f864376
--- /dev/null
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts
@@ -0,0 +1,78 @@
+import {
+ CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_AREA_CHART_TYPE,
+} from "../../components/CategoricalAreaChart/constants";
+import {
+ CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_BAR_CHART_TYPE,
+} from "../../components/CategoricalBarChart/constants";
+import {
+ CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_DONUT_CHART_TYPE,
+} from "../../components/CategoricalDonutChart/constants";
+import {
+ CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_LINE_CHART_TYPE,
+} from "../../components/CategoricalLineChart/constants";
+import {
+ CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_WATERFALL_CHART_TYPE,
+} from "../../components/CategoricalWaterfallChart/constants";
+import {
+ TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_AREA_CHART_TYPE,
+} from "../../components/TimeSeriesAreaChart/constants";
+import {
+ TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_BAR_CHART_TYPE,
+} from "../../components/TimeSeriesBarChart/constants";
+import {
+ TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_LINE_CHART_TYPE,
+} from "../../components/TimeSeriesLineChart/constants";
+import {
+ TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_WATERFALL_CHART_TYPE,
+} from "../../components/TimeSeriesWaterfallChart/constants";
+import {
+ PROGRESS_BAR_DEFAULT_DATA_1,
+ PROGRESS_BAR_TYPE,
+} from "../../components/ProgressBar/constants";
+import {
+ LINE_AREA_BAR_CHART_TYPE,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_1,
+} from "../../components/LineAreaBarChart/constants";
+import {
+ FUNNEL_CHART_DEFAULT_OPTIONS,
+ FUNNEL_CHART_TYPE,
+} from "../../components/FunnelChart/constants";
+
+export const STATIC_CHART_TYPES = [
+ CATEGORICAL_AREA_CHART_TYPE,
+ CATEGORICAL_BAR_CHART_TYPE,
+ CATEGORICAL_DONUT_CHART_TYPE,
+ CATEGORICAL_LINE_CHART_TYPE,
+ CATEGORICAL_WATERFALL_CHART_TYPE,
+ TIME_SERIES_AREA_CHART_TYPE,
+ TIME_SERIES_BAR_CHART_TYPE,
+ TIME_SERIES_LINE_CHART_TYPE,
+ TIME_SERIES_WATERFALL_CHART_TYPE,
+ PROGRESS_BAR_TYPE,
+ LINE_AREA_BAR_CHART_TYPE,
+ FUNNEL_CHART_TYPE,
+] as const;
+
+export const STATIC_CHART_DEFAULT_OPTIONS = [
+ CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS,
+ CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS,
+ TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS,
+ PROGRESS_BAR_DEFAULT_DATA_1,
+ LINE_AREA_BAR_DEFAULT_OPTIONS_1,
+ FUNNEL_CHART_DEFAULT_OPTIONS,
+] as const;
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/types.ts b/frontend/src/metabase/static-viz/containers/StaticChart/types.ts
new file mode 100644
index 00000000000..5104371c633
--- /dev/null
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/types.ts
@@ -0,0 +1,8 @@
+import { STATIC_CHART_TYPES } from "./constants";
+
+type StaticChartType = typeof STATIC_CHART_TYPES[number];
+
+export interface StaticChartProps {
+ type: StaticChartType;
+ options: any;
+}
--
GitLab