From bac8ab352c4c775c2244dd10faa039eb0c7c82b5 Mon Sep 17 00:00:00 2001
From: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>
Date: Fri, 16 Sep 2022 14:26:58 +0400
Subject: [PATCH] remove unused static chart types (#25440)
* remove unused static chart types
* add visual tests for single series charts
---
.../metabase/internal/pages/StaticVizPage.jsx | 68 -------
.../CategoricalAreaChart.jsx | 171 ------------------
.../CategoricalAreaChart/constants.ts | 22 ---
.../components/CategoricalAreaChart/index.js | 1 -
.../CategoricalBarChart.jsx | 168 -----------------
.../CategoricalBarChart/constants.ts | 22 ---
.../components/CategoricalBarChart/index.js | 1 -
.../CategoricalLineChart.jsx | 162 -----------------
.../CategoricalLineChart/constants.ts | 22 ---
.../components/CategoricalLineChart/index.js | 1 -
.../TimeSeriesAreaChart.jsx | 145 ---------------
.../TimeSeriesAreaChart/constants.ts | 21 ---
.../components/TimeSeriesAreaChart/index.js | 1 -
.../TimeSeriesBarChart/TimeSeriesBarChart.jsx | 142 ---------------
.../TimeSeriesBarChart/constants.ts | 26 ---
.../components/TimeSeriesBarChart/index.js | 1 -
.../TimeSeriesLineChart.jsx | 135 --------------
.../TimeSeriesLineChart/constants.ts | 13 --
.../components/TimeSeriesLineChart/index.js | 1 -
.../containers/StaticChart/StaticChart.tsx | 24 ---
.../StaticChart/StaticChart.unit.spec.js | 168 -----------------
.../containers/StaticChart/constants.ts | 36 ----
.../line-area-bar-combo.cy.spec.js | 19 ++
.../frontend_shared/static_viz_interface.js | 48 -----
24 files changed, 19 insertions(+), 1399 deletions(-)
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalAreaChart/index.js
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalBarChart/index.js
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/components/CategoricalLineChart/index.js
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/index.js
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesBarChart/index.js
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
delete mode 100644 frontend/src/metabase/static-viz/components/TimeSeriesLineChart/index.js
diff --git a/frontend/src/metabase/internal/pages/StaticVizPage.jsx b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
index 081b84affaa..f2fd3be7138 100644
--- a/frontend/src/metabase/internal/pages/StaticVizPage.jsx
+++ b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
@@ -7,30 +7,6 @@ import {
STATIC_CHART_DEFAULT_OPTIONS,
} from "metabase/static-viz/containers/StaticChart/constants";
import StaticChart from "metabase/static-viz/containers/StaticChart";
-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,
@@ -155,50 +131,6 @@ export default function StaticVizPage() {
</div>
)}
</PageSection>
-
- <PageSection>
- <Subhead>Line chart with timeseries data</Subhead>
- <StaticChart
- type={TIME_SERIES_LINE_CHART_TYPE}
- options={TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Area chart with timeseries data</Subhead>
- <StaticChart
- type={TIME_SERIES_AREA_CHART_TYPE}
- options={TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Bar chart with timeseries data</Subhead>
- <StaticChart
- 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_CHART_TYPE}
- options={CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Area chart with categorical data</Subhead>
- <StaticChart
- type={CATEGORICAL_AREA_CHART_TYPE}
- options={CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Bar chart with categorical data</Subhead>
- <StaticChart
- type={CATEGORICAL_BAR_CHART_TYPE}
- options={CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
<PageSection>
<Subhead>Donut chart with categorical data</Subhead>
<StaticChart
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
deleted file mode 100644
index 8c8d5e168e9..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { AxisBottom, AxisLeft } from "@visx/axis";
-import { GridRows } from "@visx/grid";
-import { scaleBand, scaleLinear } from "@visx/scale";
-import { AreaClosed, LinePath } from "@visx/shape";
-import { Text } from "@visx/text";
-import {
- getXTickWidth,
- getXTickLabelProps,
- getYTickLabelProps,
- getYTickWidth,
- getRotatedXTickHeight,
- getLabelProps,
-} from "../../lib/axes";
-import { formatNumber } from "../../lib/numbers";
-import { truncateText } from "../../lib/text";
-import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
-
-const propTypes = {
- data: PropTypes.array.isRequired,
- accessors: PropTypes.shape({
- x: PropTypes.func.isRequired,
- y: PropTypes.func.isRequired,
- }),
- settings: PropTypes.shape({
- x: PropTypes.object,
- y: PropTypes.object,
- colors: PropTypes.object,
- }),
- labels: PropTypes.shape({
- left: PropTypes.string,
- bottom: PropTypes.string,
- }),
- getColor: PropTypes.func,
-};
-
-const layout = {
- width: 540,
- height: 300,
- margin: {
- top: 0,
- left: 55,
- right: 40,
- bottom: 40,
- },
- font: {
- size: 11,
- family: "Lato, sans-serif",
- },
- colors: {
- brand: "#509ee3",
- textLight: "#b8bbc3",
- textMedium: "#949aab",
- },
- barPadding: 0.2,
- labelFontWeight: 700,
- labelPadding: 12,
- maxTickWidth: 100,
- areaOpacity: 0.2,
- strokeDasharray: "4",
-};
-
-const CategoricalAreaChart = ({
- data,
- accessors = POSITIONAL_ACCESSORS,
- settings,
- labels,
- getColor,
-}) => {
- const colors = settings?.colors;
- const isVertical = data.length > 10;
- const xTickWidth = getXTickWidth(
- data,
- accessors,
- layout.maxTickWidth,
- layout.font.size,
- );
- const xTickHeight = getRotatedXTickHeight(xTickWidth);
- const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
- const xLabelOffset = xTickHeight + layout.labelPadding + layout.font.size;
- const yLabelOffset = yTickWidth + layout.labelPadding;
- const xMin = yLabelOffset + layout.font.size * 1.5;
- const xMax = layout.width - layout.margin.right;
- const yMin = isVertical ? xLabelOffset : layout.margin.bottom;
- const yMax = layout.height - yMin;
- const innerWidth = xMax - xMin;
- const textBaseline = Math.floor(layout.font.size / 2);
- const leftLabel = labels?.left;
- const bottomLabel = !isVertical ? labels?.bottom : undefined;
- const palette = { ...layout.colors, ...colors };
-
- const xScale = scaleBand({
- domain: data.map(accessors.x),
- range: [xMin, xMax],
- round: true,
- padding: layout.barPadding,
- });
-
- const yScale = scaleLinear({
- domain: [0, Math.max(...data.map(accessors.y))],
- range: [yMax, 0],
- nice: true,
- });
-
- const getXTickProps = ({ x, y, formattedValue, ...props }) => {
- const textWidth = isVertical ? xTickWidth : xScale.bandwidth();
- const truncatedText = truncateText(
- formattedValue,
- textWidth,
- layout.font.size,
- );
- const transform = isVertical
- ? `rotate(45, ${x} ${y}) translate(-${textBaseline} 0)`
- : undefined;
-
- return { ...props, x, y, transform, children: truncatedText };
- };
-
- return (
- <svg width={layout.width} height={layout.height}>
- <GridRows
- scale={yScale}
- left={xMin}
- width={innerWidth}
- strokeDasharray={layout.strokeDasharray}
- />
- <AreaClosed
- data={data}
- yScale={yScale}
- fill={palette.brand}
- opacity={layout.areaOpacity}
- x={d => xScale(accessors.x(d)) + xScale.bandwidth() / 2}
- y={d => yScale(accessors.y(d))}
- />
- <AxisLeft
- scale={yScale}
- left={xMin}
- label={leftLabel}
- labelOffset={yLabelOffset}
- hideTicks
- hideAxisLine
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatNumber(value, settings?.y)}
- tickLabelProps={() => getYTickLabelProps(layout, getColor)}
- />
- <LinePath
- data={data}
- stroke={palette.brand}
- strokeWidth={layout.strokeWidth}
- x={d => xScale(accessors.x(d)) + xScale.bandwidth() / 2}
- y={d => yScale(accessors.y(d))}
- />
- <AxisBottom
- scale={xScale}
- top={yMax}
- label={bottomLabel}
- numTicks={data.length}
- stroke={palette.textLight}
- tickStroke={palette.textLight}
- labelProps={getLabelProps(layout, getColor)}
- tickComponent={props => <Text {...getXTickProps(props)} />}
- tickLabelProps={() => getXTickLabelProps(layout, isVertical, getColor)}
- />
- </svg>
- );
-};
-
-CategoricalAreaChart.propTypes = propTypes;
-
-export default CategoricalAreaChart;
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
deleted file mode 100644
index 7c91372f58e..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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],
- ],
- labels: {
- left: "Tasks",
- bottom: "People",
- },
-};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/index.js b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/index.js
deleted file mode 100644
index f57673cb6a5..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CategoricalAreaChart";
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
deleted file mode 100644
index b5231519c86..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { AxisBottom, AxisLeft } from "@visx/axis";
-import { GridRows } from "@visx/grid";
-import { scaleBand, scaleLinear } from "@visx/scale";
-import { Bar } from "@visx/shape";
-import { Text } from "@visx/text";
-import {
- getXTickWidth,
- getXTickLabelProps,
- getYTickLabelProps,
- getYTickWidth,
- getRotatedXTickHeight,
- getLabelProps,
-} from "../../lib/axes";
-import { formatNumber } from "../../lib/numbers";
-import { truncateText } from "../../lib/text";
-import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
-
-const propTypes = {
- data: PropTypes.array.isRequired,
- accessors: PropTypes.shape({
- x: PropTypes.func.isRequired,
- y: PropTypes.func.isRequired,
- }),
- settings: PropTypes.shape({
- x: PropTypes.object,
- y: PropTypes.object,
- colors: PropTypes.object,
- }),
- labels: PropTypes.shape({
- left: PropTypes.string,
- bottom: PropTypes.string,
- }),
- getColor: PropTypes.func,
-};
-
-const layout = {
- width: 540,
- height: 300,
- margin: {
- top: 0,
- left: 55,
- right: 40,
- bottom: 40,
- },
- font: {
- size: 11,
- family: "Lato, sans-serif",
- },
- colors: {
- brand: "#509ee3",
- textLight: "#b8bbc3",
- textMedium: "#949aab",
- },
- barPadding: 0.2,
- labelFontWeight: 700,
- labelPadding: 12,
- maxTickWidth: 100,
- strokeDasharray: "4",
-};
-
-const CategoricalBarChart = ({
- data,
- accessors = POSITIONAL_ACCESSORS,
- settings,
- labels,
- getColor,
-}) => {
- const colors = settings?.colors;
- const isVertical = data.length > 10;
- const xTickWidth = getXTickWidth(
- data,
- accessors,
- layout.maxTickWidth,
- layout.font.size,
- );
- const xTickHeight = getRotatedXTickHeight(xTickWidth);
- const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
- const xLabelOffset = xTickHeight + layout.labelPadding + layout.font.size;
- const yLabelOffset = yTickWidth + layout.labelPadding;
- const xMin = yLabelOffset + layout.font.size * 1.5;
- const xMax = layout.width - layout.margin.right;
- const yMin = isVertical ? xLabelOffset : layout.margin.bottom;
- const yMax = layout.height - yMin;
- const innerWidth = xMax - xMin;
- const innerHeight = yMax - layout.margin.top;
- const textBaseline = Math.floor(layout.font.size / 2);
- const leftLabel = labels?.left;
- const bottomLabel = !isVertical ? labels?.bottom : undefined;
- const palette = { ...layout.colors, ...colors };
-
- const xScale = scaleBand({
- domain: data.map(accessors.x),
- range: [xMin, xMax],
- round: true,
- padding: layout.barPadding,
- });
-
- const yScale = scaleLinear({
- domain: [0, Math.max(...data.map(accessors.y))],
- range: [yMax, 0],
- nice: true,
- });
-
- const getBarProps = d => {
- const width = xScale.bandwidth();
- const height = innerHeight - yScale(accessors.y(d));
- const x = xScale(accessors.x(d));
- const y = yMax - height;
-
- return { x, y, width, height, fill: palette.brand };
- };
-
- const getXTickProps = ({ x, y, formattedValue, ...props }) => {
- const textWidth = isVertical ? xTickWidth : xScale.bandwidth();
- const truncatedText = truncateText(
- formattedValue,
- textWidth,
- layout.font.size,
- );
- const transform = isVertical
- ? `rotate(45, ${x} ${y}) translate(-${textBaseline} 0)`
- : undefined;
-
- return { ...props, x, y, transform, children: truncatedText };
- };
-
- return (
- <svg width={layout.width} height={layout.height}>
- <GridRows
- scale={yScale}
- left={xMin}
- width={innerWidth}
- strokeDasharray={layout.strokeDasharray}
- />
- {data.map((d, index) => (
- <Bar key={index} {...getBarProps(d)} />
- ))}
- <AxisLeft
- scale={yScale}
- left={xMin}
- label={leftLabel}
- labelOffset={yLabelOffset}
- hideTicks
- hideAxisLine
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatNumber(value, settings?.y)}
- tickLabelProps={() => getYTickLabelProps(layout, getColor)}
- />
- <AxisBottom
- scale={xScale}
- top={yMax}
- label={bottomLabel}
- numTicks={data.length}
- stroke={palette.textLight}
- tickStroke={palette.textLight}
- labelProps={getLabelProps(layout, getColor)}
- tickComponent={props => <Text {...getXTickProps(props)} />}
- tickLabelProps={() => getXTickLabelProps(layout, isVertical, getColor)}
- />
- </svg>
- );
-};
-
-CategoricalBarChart.propTypes = propTypes;
-
-export default CategoricalBarChart;
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
deleted file mode 100644
index cba67d6241f..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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],
- ],
- labels: {
- left: "Tasks",
- bottom: "People",
- },
-};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/index.js b/frontend/src/metabase/static-viz/components/CategoricalBarChart/index.js
deleted file mode 100644
index 74a0f3cb5bc..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalBarChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CategoricalBarChart";
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
deleted file mode 100644
index a6e46aa3027..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { AxisBottom, AxisLeft } from "@visx/axis";
-import { GridRows } from "@visx/grid";
-import { scaleBand, scaleLinear } from "@visx/scale";
-import { LinePath } from "@visx/shape";
-import { Text } from "@visx/text";
-import {
- getXTickWidth,
- getXTickLabelProps,
- getYTickLabelProps,
- getYTickWidth,
- getRotatedXTickHeight,
- getLabelProps,
-} from "../../lib/axes";
-import { formatNumber } from "../../lib/numbers";
-import { truncateText } from "../../lib/text";
-import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
-
-const propTypes = {
- data: PropTypes.array.isRequired,
- accessors: PropTypes.shape({
- x: PropTypes.func.isRequired,
- y: PropTypes.func.isRequired,
- }),
- settings: PropTypes.shape({
- x: PropTypes.object,
- y: PropTypes.object,
- colors: PropTypes.object,
- }),
- labels: PropTypes.shape({
- left: PropTypes.string,
- bottom: PropTypes.string,
- }),
- getColor: PropTypes.func,
-};
-
-const layout = {
- width: 540,
- height: 300,
- margin: {
- top: 0,
- left: 55,
- right: 40,
- bottom: 40,
- },
- font: {
- size: 11,
- family: "Lato, sans-serif",
- },
- colors: {
- brand: "#509ee3",
- textLight: "#b8bbc3",
- textMedium: "#949aab",
- },
- barPadding: 0.2,
- labelFontWeight: 700,
- labelPadding: 12,
- maxTickWidth: 100,
- strokeDasharray: "4",
-};
-
-const CategoricalLineChart = ({
- data,
- accessors = POSITIONAL_ACCESSORS,
- settings,
- labels,
- getColor,
-}) => {
- const colors = settings?.colors;
- const isVertical = data.length > 10;
- const xTickWidth = getXTickWidth(
- data,
- accessors,
- layout.maxTickWidth,
- layout.font.size,
- );
- const xTickHeight = getRotatedXTickHeight(xTickWidth);
- const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
- const xLabelOffset = xTickHeight + layout.labelPadding + layout.font.size;
- const yLabelOffset = yTickWidth + layout.labelPadding;
- const xMin = yLabelOffset + layout.font.size * 1.5;
- const xMax = layout.width - layout.margin.right;
- const yMin = isVertical ? xLabelOffset : layout.margin.bottom;
- const yMax = layout.height - yMin;
- const innerWidth = xMax - xMin;
- const textBaseline = Math.floor(layout.font.size / 2);
- const leftLabel = labels?.left;
- const bottomLabel = !isVertical ? labels?.bottom : undefined;
- const palette = { ...layout.colors, ...colors };
-
- const xScale = scaleBand({
- domain: data.map(accessors.x),
- range: [xMin, xMax],
- round: true,
- padding: layout.barPadding,
- });
-
- const yScale = scaleLinear({
- domain: [0, Math.max(...data.map(accessors.y))],
- range: [yMax, 0],
- nice: true,
- });
-
- const getXTickProps = ({ x, y, formattedValue, ...props }) => {
- const textWidth = isVertical ? xTickWidth : xScale.bandwidth();
- const truncatedText = truncateText(
- formattedValue,
- textWidth,
- layout.font.size,
- );
- const transform = isVertical
- ? `rotate(45, ${x} ${y}) translate(-${textBaseline} 0)`
- : undefined;
-
- return { ...props, x, y, transform, children: truncatedText };
- };
-
- return (
- <svg width={layout.width} height={layout.height}>
- <GridRows
- scale={yScale}
- left={xMin}
- width={innerWidth}
- strokeDasharray={layout.strokeDasharray}
- />
- <LinePath
- data={data}
- stroke={palette.brand}
- strokeWidth={layout.strokeWidth}
- x={d => xScale(accessors.x(d)) + xScale.bandwidth() / 2}
- y={d => yScale(accessors.y(d))}
- />
- <AxisLeft
- scale={yScale}
- left={xMin}
- label={leftLabel}
- labelOffset={yLabelOffset}
- hideTicks
- hideAxisLine
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatNumber(value, settings?.y)}
- tickLabelProps={() => getYTickLabelProps(layout, getColor)}
- />
- <AxisBottom
- scale={xScale}
- top={yMax}
- label={bottomLabel}
- numTicks={data.length}
- stroke={palette.textLight}
- tickStroke={palette.textLight}
- labelProps={getLabelProps(layout, getColor)}
- tickComponent={props => <Text {...getXTickProps(props)} />}
- tickLabelProps={() => getXTickLabelProps(layout, isVertical, getColor)}
- />
- </svg>
- );
-};
-
-CategoricalLineChart.propTypes = propTypes;
-
-export default CategoricalLineChart;
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
deleted file mode 100644
index 6c173d09c46..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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],
- ],
- labels: {
- left: "Tasks",
- bottom: "People",
- },
-};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/index.js b/frontend/src/metabase/static-viz/components/CategoricalLineChart/index.js
deleted file mode 100644
index c6ab45b493b..00000000000
--- a/frontend/src/metabase/static-viz/components/CategoricalLineChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CategoricalLineChart";
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
deleted file mode 100644
index e3b6db55623..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { scaleLinear, scaleBand } from "@visx/scale";
-import { GridRows } from "@visx/grid";
-import { AxisBottom, AxisLeft } from "@visx/axis";
-import { AreaClosed, LinePath } from "@visx/shape";
-import {
- getLabelProps,
- getXTickLabelProps,
- getYTickLabelProps,
- getYTickWidth,
-} from "../../lib/axes";
-import { formatDate } from "../../lib/dates";
-import { formatNumber } from "../../lib/numbers";
-import { sortTimeSeries } from "../../lib/sort";
-import { DATE_ACCESSORS } from "../../constants/accessors";
-
-const propTypes = {
- data: PropTypes.array.isRequired,
- accessors: PropTypes.shape({
- x: PropTypes.func,
- y: PropTypes.func,
- }),
- settings: PropTypes.shape({
- x: PropTypes.object,
- y: PropTypes.object,
- colors: PropTypes.object,
- }),
- labels: PropTypes.shape({
- left: PropTypes.string,
- bottom: PropTypes.string,
- }),
- getColor: PropTypes.func,
-};
-
-const layout = {
- width: 540,
- height: 300,
- margin: {
- top: 0,
- left: 55,
- right: 40,
- bottom: 40,
- },
- font: {
- size: 11,
- family: "Lato, sans-serif",
- },
- colors: {
- brand: "#509ee3",
- brandLight: "#DDECFA",
- textLight: "#b8bbc3",
- textMedium: "#949aab",
- },
- numTicks: 5,
- strokeWidth: 2,
- labelFontWeight: 700,
- labelPadding: 12,
- areaOpacity: 0.2,
- strokeDasharray: "4",
-};
-
-const TimeSeriesAreaChart = ({
- data,
- accessors = DATE_ACCESSORS,
- settings,
- labels,
- getColor,
-}) => {
- data = sortTimeSeries(data);
- const colors = settings?.colors;
- const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
- const yLabelOffset = yTickWidth + layout.labelPadding;
- const xMin = yLabelOffset + layout.font.size * 1.5;
- const xMax = layout.width - layout.margin.right;
- const yMax = layout.height - layout.margin.bottom;
- const innerWidth = xMax - xMin;
- const leftLabel = labels?.left;
- const bottomLabel = labels?.bottom;
- const palette = { ...layout.colors, ...colors };
-
- const xScale = scaleBand({
- domain: data.map(accessors.x),
- range: [xMin, xMax],
- round: true,
- });
-
- const yScale = scaleLinear({
- domain: [0, Math.max(...data.map(accessors.y))],
- range: [yMax, 0],
- nice: true,
- });
-
- return (
- <svg width={layout.width} height={layout.height}>
- <GridRows
- scale={yScale}
- left={xMin}
- width={innerWidth}
- strokeDasharray={layout.strokeDasharray}
- />
- <AreaClosed
- data={data}
- yScale={yScale}
- fill={palette.brand}
- opacity={layout.areaOpacity}
- x={d => xScale(accessors.x(d)) + xScale.bandwidth() / 2}
- y={d => yScale(accessors.y(d))}
- />
- <LinePath
- data={data}
- stroke={palette.brand}
- strokeWidth={layout.strokeWidth}
- x={d => xScale(accessors.x(d)) + xScale.bandwidth() / 2}
- y={d => yScale(accessors.y(d))}
- />
- <AxisLeft
- scale={yScale}
- left={xMin}
- label={leftLabel}
- labelOffset={yLabelOffset}
- hideTicks
- hideAxisLine
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatNumber(value, settings?.y)}
- tickLabelProps={() => getYTickLabelProps(layout, getColor)}
- />
- <AxisBottom
- scale={xScale}
- top={yMax}
- label={bottomLabel}
- numTicks={layout.numTicks}
- stroke={palette.textLight}
- tickStroke={palette.textLight}
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatDate(value, settings?.x)}
- tickLabelProps={() => getXTickLabelProps(layout, false, getColor)}
- />
- </svg>
- );
-};
-
-TimeSeriesAreaChart.propTypes = propTypes;
-
-export default TimeSeriesAreaChart;
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
deleted file mode 100644
index 0e22c3b2f7c..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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],
- ],
- settings: {
- x: {
- date_style: "MMM",
- },
- },
- labels: {
- left: "Count",
- bottom: "Created At",
- },
- colors: {
- brand: "#88BF4D",
- },
-};
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/index.js b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/index.js
deleted file mode 100644
index 97b1d21fca2..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./TimeSeriesAreaChart";
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
deleted file mode 100644
index 158c65b93fe..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { AxisBottom, AxisLeft } from "@visx/axis";
-import { GridRows } from "@visx/grid";
-import { scaleBand, scaleLinear } from "@visx/scale";
-import { Bar } from "@visx/shape";
-import {
- getLabelProps,
- getXTickLabelProps,
- getYTickLabelProps,
- getYTickWidth,
-} from "../../lib/axes";
-import { formatDate } from "../../lib/dates";
-import { formatNumber } from "../../lib/numbers";
-import { sortTimeSeries } from "../../lib/sort";
-import { DATE_ACCESSORS } from "../../constants/accessors";
-
-const propTypes = {
- data: PropTypes.array.isRequired,
- accessors: PropTypes.shape({
- x: PropTypes.func.isRequired,
- y: PropTypes.func.isRequired,
- }),
- settings: PropTypes.shape({
- x: PropTypes.object,
- y: PropTypes.object,
- colors: PropTypes.object,
- }),
- labels: PropTypes.shape({
- left: PropTypes.string,
- bottom: PropTypes.string,
- }),
- getColor: PropTypes.func,
-};
-
-const layout = {
- width: 540,
- height: 300,
- margin: {
- top: 0,
- left: 55,
- right: 40,
- bottom: 40,
- },
- font: {
- size: 11,
- family: "Lato, sans-serif",
- },
- colors: {
- brand: "#509ee3",
- textLight: "#b8bbc3",
- textMedium: "#949aab",
- },
- numTicks: 5,
- barPadding: 0.2,
- labelFontWeight: 700,
- labelPadding: 12,
- strokeDasharray: "4",
-};
-
-const TimeSeriesBarChart = ({
- data,
- accessors = DATE_ACCESSORS,
- settings,
- labels,
- getColor,
-}) => {
- data = sortTimeSeries(data);
- const colors = settings?.colors;
- const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
- const yLabelOffset = yTickWidth + layout.labelPadding;
- const xMin = yLabelOffset + layout.font.size * 1.5;
- const xMax = layout.width - layout.margin.right;
- const yMax = layout.height - layout.margin.bottom;
- const innerWidth = xMax - xMin;
- const innerHeight = yMax - layout.margin.top;
- const leftLabel = labels?.left;
- const bottomLabel = labels?.bottom;
- const palette = { ...layout.colors, ...colors };
-
- const xScale = scaleBand({
- domain: data.map(accessors.x),
- range: [xMin, xMax],
- round: true,
- padding: layout.barPadding,
- });
-
- const yScale = scaleLinear({
- domain: [0, Math.max(...data.map(accessors.y))],
- range: [yMax, 0],
- nice: true,
- });
-
- const getBarProps = d => {
- const width = xScale.bandwidth();
- const height = innerHeight - yScale(accessors.y(d));
- const x = xScale(accessors.x(d));
- const y = yMax - height;
-
- return { x, y, width, height, fill: palette.brand };
- };
-
- return (
- <svg width={layout.width} height={layout.height}>
- <GridRows
- scale={yScale}
- left={xMin}
- width={innerWidth}
- strokeDasharray={layout.strokeDasharray}
- />
- {data.map((d, index) => (
- <Bar key={index} {...getBarProps(d)} />
- ))}
- <AxisLeft
- scale={yScale}
- left={xMin}
- label={leftLabel}
- labelOffset={yLabelOffset}
- hideTicks
- hideAxisLine
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatNumber(value, settings?.y)}
- tickLabelProps={() => getYTickLabelProps(layout, getColor)}
- />
- <AxisBottom
- scale={xScale}
- top={yMax}
- label={bottomLabel}
- numTicks={layout.numTicks}
- stroke={palette.textLight}
- tickStroke={palette.textLight}
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatDate(value, settings?.x)}
- tickLabelProps={() => getXTickLabelProps(layout, false, getColor)}
- />
- </svg>
- );
-};
-
-TimeSeriesBarChart.propTypes = propTypes;
-
-export default TimeSeriesBarChart;
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
deleted file mode 100644
index a15964b7484..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-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],
- ],
- 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/TimeSeriesBarChart/index.js b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/index.js
deleted file mode 100644
index b105a05e679..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./TimeSeriesBarChart";
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
deleted file mode 100644
index 7d720b3f8c8..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { scaleLinear, scaleBand } from "@visx/scale";
-import { GridRows } from "@visx/grid";
-import { AxisBottom, AxisLeft } from "@visx/axis";
-import { LinePath } from "@visx/shape";
-import {
- getXTickLabelProps,
- getYTickWidth,
- getYTickLabelProps,
- getLabelProps,
-} from "../../lib/axes";
-import { formatDate } from "../../lib/dates";
-import { formatNumber } from "../../lib/numbers";
-import { sortTimeSeries } from "../../lib/sort";
-import { DATE_ACCESSORS } from "../../constants/accessors";
-
-const propTypes = {
- data: PropTypes.array.isRequired,
- accessors: PropTypes.shape({
- x: PropTypes.func,
- y: PropTypes.func,
- }),
- settings: PropTypes.shape({
- x: PropTypes.object,
- y: PropTypes.object,
- colors: PropTypes.object,
- }),
- labels: PropTypes.shape({
- left: PropTypes.string,
- bottom: PropTypes.string,
- }),
- getColor: PropTypes.func,
-};
-
-const layout = {
- width: 540,
- height: 300,
- margin: {
- top: 0,
- left: 55,
- right: 40,
- bottom: 40,
- },
- font: {
- size: 11,
- family: "Lato, sans-serif",
- },
- colors: {
- brand: "#509ee3",
- textLight: "#b8bbc3",
- textMedium: "#949aab",
- },
- numTicks: 5,
- labelFontWeight: 700,
- labelPadding: 12,
- strokeWidth: 2,
- strokeDasharray: "4",
-};
-
-const TimeSeriesLineChart = ({
- data,
- accessors = DATE_ACCESSORS,
- settings,
- labels,
- getColor,
-}) => {
- data = sortTimeSeries(data);
- const colors = settings?.colors;
- const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
- const yLabelOffset = yTickWidth + layout.labelPadding;
- const xMin = yLabelOffset + layout.font.size * 1.5;
- const xMax = layout.width - layout.margin.right;
- const yMax = layout.height - layout.margin.bottom;
- const innerWidth = xMax - xMin;
- const leftLabel = labels?.left;
- const bottomLabel = labels?.bottom;
- const palette = { ...layout.colors, ...colors };
-
- const xScale = scaleBand({
- domain: data.map(accessors.x),
- range: [xMin, xMax],
- round: true,
- });
-
- const yScale = scaleLinear({
- domain: [0, Math.max(...data.map(accessors.y))],
- range: [yMax, 0],
- nice: true,
- });
-
- return (
- <svg width={layout.width} height={layout.height}>
- <GridRows
- scale={yScale}
- left={xMin}
- width={innerWidth}
- strokeDasharray={layout.strokeDasharray}
- />
- <LinePath
- data={data}
- stroke={palette.brand}
- strokeWidth={layout.strokeWidth}
- x={d => xScale(accessors.x(d)) + xScale.bandwidth() / 2}
- y={d => yScale(accessors.y(d))}
- />
- <AxisLeft
- scale={yScale}
- left={xMin}
- label={leftLabel}
- labelOffset={yLabelOffset}
- hideTicks
- hideAxisLine
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatNumber(value, settings?.y)}
- tickLabelProps={() => getYTickLabelProps(layout, getColor)}
- />
- <AxisBottom
- scale={xScale}
- top={yMax}
- label={bottomLabel}
- numTicks={layout.numTicks}
- stroke={palette.textLight}
- tickStroke={palette.textLight}
- labelProps={getLabelProps(layout, getColor)}
- tickFormat={value => formatDate(value, settings?.x)}
- tickLabelProps={() => getXTickLabelProps(layout, false, getColor)}
- />
- </svg>
- );
-};
-
-TimeSeriesLineChart.propTypes = propTypes;
-
-export default TimeSeriesLineChart;
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
deleted file mode 100644
index b29045effa7..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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],
- ],
- labels: {
- left: "Count",
- bottom: "Created At",
- },
-};
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/index.js b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/index.js
deleted file mode 100644
index d23115fed8d..00000000000
--- a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./TimeSeriesLineChart";
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx
index 334a3ee2bb4..f023616b482 100644
--- a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.tsx
@@ -1,21 +1,9 @@
import React from "react";
import { createColorGetter } from "metabase/static-viz/lib/colors";
-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";
@@ -31,22 +19,10 @@ const StaticChart = ({ type, options }: StaticChartProps) => {
const chartProps = { ...options, getColor };
switch (type) {
- case CATEGORICAL_AREA_CHART_TYPE:
- return <CategoricalAreaChart {...chartProps} />;
- case CATEGORICAL_BAR_CHART_TYPE:
- return <CategoricalBarChart {...chartProps} />;
case CATEGORICAL_DONUT_CHART_TYPE:
return <CategoricalDonutChart {...chartProps} />;
- case CATEGORICAL_LINE_CHART_TYPE:
- return <CategoricalLineChart {...chartProps} />;
case CATEGORICAL_WATERFALL_CHART_TYPE:
return <CategoricalWaterfallChart {...chartProps} />;
- case TIME_SERIES_AREA_CHART_TYPE:
- return <TimeSeriesAreaChart {...chartProps} />;
- case TIME_SERIES_BAR_CHART_TYPE:
- return <TimeSeriesBarChart {...chartProps} />;
- case TIME_SERIES_LINE_CHART_TYPE:
- return <TimeSeriesLineChart {...chartProps} />;
case TIME_SERIES_WATERFALL_CHART_TYPE:
return <TimeSeriesWaterfallChart {...chartProps} />;
case PROGRESS_BAR_TYPE:
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js
index 2aae7c07c77..9ca7ae02570 100644
--- a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js
@@ -3,96 +3,6 @@ import { render, screen } from "@testing-library/react";
import StaticChart from "./StaticChart";
describe("StaticChart", () => {
- it("should render categorical/line", () => {
- render(
- <StaticChart
- type="categorical/line"
- options={{
- data: [
- ["Gadget", 20],
- ["Widget", 31],
- ],
- settings: {
- y: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- },
- },
- labels: {
- left: "Count",
- bottom: "Category",
- },
- }}
- />,
- );
-
- screen.getByText("Gadget");
- screen.getByText("Widget");
- screen.getAllByText("Count");
- screen.getAllByText("Category");
- });
-
- it("should render categorical/area", () => {
- render(
- <StaticChart
- type="categorical/area"
- options={{
- data: [
- ["Gadget", 20],
- ["Widget", 31],
- ],
- settings: {
- y: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- },
- },
- labels: {
- left: "Count",
- bottom: "Category",
- },
- }}
- />,
- );
-
- screen.getByText("Gadget");
- screen.getByText("Widget");
- screen.getAllByText("Count");
- screen.getAllByText("Category");
- });
-
- it("should render categorical/bar", () => {
- render(
- <StaticChart
- type="categorical/bar"
- options={{
- data: [
- ["Gadget", 20],
- ["Widget", 31],
- ],
- settings: {
- y: {
- number_style: "currency",
- currency: "USD",
- currency_style: "symbol",
- },
- },
- labels: {
- left: "Count",
- bottom: "Category",
- },
- }}
- />,
- );
-
- screen.getByText("Gadget");
- screen.getByText("Widget");
- screen.getAllByText("Count");
- screen.getAllByText("Category");
- });
-
it("should render categorical/donut", () => {
render(
<StaticChart
@@ -120,82 +30,4 @@ describe("StaticChart", () => {
screen.getByText("$5,100.00");
screen.getAllByText("TOTAL");
});
-
- it("should render timeseries/line", () => {
- render(
- <StaticChart
- type="timeseries/line"
- options={{
- data: [
- ["2010-11-07", 20],
- ["2020-11-08", 30],
- ],
- settings: {
- x: {
- date_style: "dddd",
- },
- },
- labels: {
- left: "Count",
- bottom: "Time",
- },
- }}
- />,
- );
-
- screen.getAllByText("Count");
- screen.getAllByText("Time");
- });
-
- it("should render timeseries/area", () => {
- render(
- <StaticChart
- type="timeseries/area"
- options={{
- data: [
- ["2010-11-07", 20],
- ["2020-11-08", 30],
- ],
- settings: {
- x: {
- date_style: "MMM",
- },
- },
- labels: {
- left: "Count",
- bottom: "Time",
- },
- }}
- />,
- );
-
- screen.getAllByText("Count");
- screen.getAllByText("Time");
- });
-
- it("should render timeseries/bar", () => {
- render(
- <StaticChart
- type="timeseries/bar"
- options={{
- data: [
- ["2010-11-07", 20],
- ["2020-11-08", 30],
- ],
- settings: {
- x: {
- date_style: "dddd",
- },
- },
- labels: {
- left: "Count",
- bottom: "Time",
- },
- }}
- />,
- );
-
- screen.getAllByText("Count");
- screen.getAllByText("Time");
- });
});
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts b/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts
index fff4f864376..189d86d257f 100644
--- a/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/constants.ts
@@ -1,35 +1,11 @@
-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,
@@ -48,14 +24,8 @@ import {
} 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,
@@ -63,14 +33,8 @@ export const STATIC_CHART_TYPES = [
] 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,
diff --git a/frontend/test/metabase-visual/static-visualizations/line-area-bar-combo.cy.spec.js b/frontend/test/metabase-visual/static-visualizations/line-area-bar-combo.cy.spec.js
index b8f2fc0daa0..d720e5ec1f2 100644
--- a/frontend/test/metabase-visual/static-visualizations/line-area-bar-combo.cy.spec.js
+++ b/frontend/test/metabase-visual/static-visualizations/line-area-bar-combo.cy.spec.js
@@ -28,6 +28,7 @@ describe("static visualizations", () => {
cy.createDashboardWithQuestions({
dashboardName,
questions: [
+ createOneDimensionOneMetricQuestion(visualizationType),
createOneMetricTwoDimensionsQuestion(visualizationType),
createOneDimensionTwoMetricsQuestion(visualizationType),
],
@@ -44,6 +45,24 @@ describe("static visualizations", () => {
});
});
+function createOneDimensionOneMetricQuestion(display) {
+ return {
+ name: `${display} one dimension one metric`,
+ query: {
+ "source-table": ORDERS_ID,
+ aggregation: [["count"]],
+ breakout: [["field", ORDERS.CREATED_AT, { "temporal-unit": "month" }]],
+ },
+ visualization_settings: {
+ "graph.dimensions": ["CREATED_AT"],
+ "graph.metrics": ["count"],
+ "graph.show_values": true,
+ },
+ display: display,
+ database: SAMPLE_DB_ID,
+ };
+}
+
function createOneDimensionTwoMetricsQuestion(display) {
return {
name: `${display} one dimension two metrics`,
diff --git a/resources/frontend_shared/static_viz_interface.js b/resources/frontend_shared/static_viz_interface.js
index 97dc555c2af..c6a7b3855e9 100644
--- a/resources/frontend_shared/static_viz_interface.js
+++ b/resources/frontend_shared/static_viz_interface.js
@@ -14,30 +14,6 @@ function toJSMap(m) {
return o;
}
-function timeseries_line(data, labels, settings) {
- return StaticViz.RenderChart("timeseries/line", {
- data: toJSArray(data),
- labels: toJSMap(labels),
- settings: JSON.parse(settings),
- });
-}
-
-function timeseries_bar(data, labels, settings) {
- return StaticViz.RenderChart("timeseries/bar", {
- data: toJSArray(data),
- labels: toJSMap(labels),
- settings: JSON.parse(settings),
- });
-}
-
-function timeseries_area(data, labels, settings) {
- return StaticViz.RenderChart("timeseries/area", {
- data: toJSArray(data),
- labels: toJSMap(labels),
- settings: JSON.parse(settings),
- });
-}
-
function combo_chart(series, settings, colors) {
// Thinking of combo as similar to multiple, although they're different in BE
return StaticViz.RenderChart("combo-chart", {
@@ -63,30 +39,6 @@ function funnel(data, settings) {
});
}
-function categorical_bar(data, labels, settings) {
- return StaticViz.RenderChart("categorical/bar", {
- data: toJSArray(data),
- labels: toJSMap(labels),
- settings: JSON.parse(settings),
- });
-}
-
-function categorical_area(data, labels, settings) {
- return StaticViz.RenderChart("categorical/area", {
- data: toJSArray(data),
- labels: toJSMap(labels),
- settings: JSON.parse(settings),
- });
-}
-
-function categorical_line(data, labels, settings) {
- return StaticViz.RenderChart("categorical/line", {
- data: toJSArray(data),
- labels: toJSMap(labels),
- settings: JSON.parse(settings),
- });
-}
-
function categorical_donut(rows, colors) {
return StaticViz.RenderChart("categorical/donut", {
data: toJSArray(rows),
--
GitLab