Clean up static chart components accessors (#20968)

* accessors constants created

* accessors dependencies removed from all charts

* Removed accessors dependencies from BE JS for static viz

* Removed accessors references in chart editor

* accessors added to defaultProps

* Remove accessors in tests

* defaultProps removed form static viz components

frontend/src/metabase/internal/pages/StaticVizPage.jsx

@@ -66,14 +66,6 @@ import {
   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);
@@ -82,7 +74,6 @@ function chartOptionsToStr(options) {
 }
 
 export default function StaticVizPage() {
-  const [staticChartTypeIndex, setStaticChartTypeIndex] = useState(-1);
   const [staticChartType, setStaticChartType] = useState(null);
   const [staticChartCustomOptions, setStaticChartCustomOptions] = useState(
     null,
@@ -92,7 +83,6 @@ export default function StaticVizPage() {
   function chartOptionsToObj(optionsStr) {
     try {
       const chartOptions = JSON.parse(optionsStr);
-      delete chartOptions["accessors"];
       setStaticChartError(null);
       return chartOptions;
     } catch (err) {
@@ -121,11 +111,10 @@ export default function StaticVizPage() {
             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);
+              setStaticChartCustomOptions({
+                ...STATIC_CHART_DEFAULT_OPTIONS[index],
+              });
             }}
           >
             <option id="">---</option>
@@ -162,10 +151,7 @@ export default function StaticVizPage() {
             <div className="text-code-plain w-full mt1">
               <StaticChart
                 type={staticChartType}
-                options={setAccessorsForChartOptions(
-                  staticChartTypeIndex,
-                  staticChartCustomOptions,
-                )}
+                options={{ ...staticChartCustomOptions }}
               />
             </div>
           )}

frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx

@@ -15,13 +15,14 @@ import {
 } 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -59,7 +60,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const CategoricalAreaChart = ({ data, accessors, settings, labels }) => {
+const CategoricalAreaChart = ({
+  data,
+  accessors = POSITIONAL_ACCESSORS,
+  settings,
+  labels,
+}) => {
   const colors = settings?.colors;
   const isVertical = data.length > 10;
   const xTickWidth = getXTickWidth(

frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts

@@ -15,10 +15,6 @@ export const CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS = {
     ["Roderick Herman", 50],
     ["Ruth Dougherty", 75],
   ],
-  accessors: {
-    x: (row: any[]) => row[0],
-    y: (row: any[]) => row[1],
-  },
   labels: {
     left: "Tasks",
     bottom: "People",

frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx

@@ -15,13 +15,14 @@ import {
 } 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -58,7 +59,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const CategoricalBarChart = ({ data, accessors, settings, labels }) => {
+const CategoricalBarChart = ({
+  data,
+  accessors = POSITIONAL_ACCESSORS,
+  settings,
+  labels,
+}) => {
   const colors = settings?.colors;
   const isVertical = data.length > 10;
   const xTickWidth = getXTickWidth(

frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts

@@ -15,10 +15,6 @@ export const CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS = {
     ["Roderick Herman", 50],
     ["Ruth Dougherty", 75],
   ],
-  accessors: {
-    x: (row: any[]) => row[0],
-    y: (row: any[]) => row[1],
-  },
   labels: {
     left: "Tasks",
     bottom: "People",

frontend/src/metabase/static-viz/components/CategoricalDonutChart/CategoricalDonutChart.jsx

@@ -5,6 +5,7 @@ import { Group } from "@visx/group";
 import { Pie } from "@visx/shape";
 import { Text } from "@visx/text";
 import { formatNumber } from "../../lib/numbers";
+import { DIMENSION_ACCESSORS } from "../../constants/accessors";
 
 const propTypes = {
   data: PropTypes.array,
@@ -37,7 +38,12 @@ const layout = {
   labelFontSize: 14,
 };
 
-const CategoricalDonutChart = ({ data, colors, accessors, settings }) => {
+const CategoricalDonutChart = ({
+  data,
+  colors,
+  accessors = DIMENSION_ACCESSORS,
+  settings,
+}) => {
   const innerWidth = layout.width - layout.margin * 2;
   const innerHeight = layout.height - layout.margin * 2;
   const outerRadius = Math.min(innerWidth, innerHeight) / 2;

frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts

@@ -9,8 +9,4 @@ export const CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS = {
     donut: "#509EE3",
     cronut: "#DDECFA",
   },
-  accessors: {
-    dimension: (row: any[]) => row[0],
-    metric: (row: any[]) => row[1],
-  },
 };

frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx

@@ -15,13 +15,14 @@ import {
 } 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -58,7 +59,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const CategoricalLineChart = ({ data, accessors, settings, labels }) => {
+const CategoricalLineChart = ({
+  data,
+  accessors = POSITIONAL_ACCESSORS,
+  settings,
+  labels,
+}) => {
   const colors = settings?.colors;
   const isVertical = data.length > 10;
   const xTickWidth = getXTickWidth(

frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts

@@ -15,10 +15,6 @@ export const CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS = {
     ["Roderick Herman", 50],
     ["Ruth Dougherty", 75],
   ],
-  accessors: {
-    x: (row: any[]) => row[0],
-    y: (row: any[]) => row[1],
-  },
   labels: {
     left: "Tasks",
     bottom: "People",

frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/CategoricalWaterfallChart.jsx

@@ -21,13 +21,14 @@ import {
   calculateWaterfallEntries,
   getWaterfallEntryColor,
 } from "metabase/static-viz/lib/waterfall";
+import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
 
 const propTypes = {
   data: PropTypes.array.isRequired,
   accessors: PropTypes.shape({
     x: PropTypes.func.isRequired,
     y: PropTypes.func.isRequired,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -68,7 +69,12 @@ const layout = {
   maxTickWidth: 100,
 };
 
-const CategoricalWaterfallChart = ({ data, accessors, settings, labels }) => {
+const CategoricalWaterfallChart = ({
+  data,
+  accessors = POSITIONAL_ACCESSORS,
+  settings,
+  labels,
+}) => {
   const entries = calculateWaterfallEntries(
     data,
     accessors,

frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts

@@ -13,10 +13,6 @@ export const CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS = {
     ["Stage 9", 100],
     ["Stage 10", -300],
   ],
-  accessors: {
-    x: (row: any[]) => row[0],
-    y: (row: any[]) => row[1],
-  },
   settings: {
     showTotal: true,
   },

frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx

@@ -13,13 +13,14 @@ import {
 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -58,7 +59,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const TimeSeriesAreaChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesAreaChart = ({
+  data,
+  accessors = DATE_ACCESSORS,
+  settings,
+  labels,
+}) => {
   data = sortTimeSeries(data);
   const colors = settings?.colors;
   const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);

frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts

@@ -6,10 +6,6 @@ export const TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS = {
     ["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",

frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx

@@ -13,13 +13,14 @@ import {
 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -56,7 +57,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const TimeSeriesBarChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesBarChart = ({
+  data,
+  accessors = DATE_ACCESSORS,
+  settings,
+  labels,
+}) => {
   data = sortTimeSeries(data);
   const colors = settings?.colors;
   const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);

frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts

@@ -8,10 +8,6 @@ export const TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS = {
     ["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",

frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx

@@ -13,13 +13,14 @@ import {
 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -56,7 +57,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const TimeSeriesLineChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesLineChart = ({
+  data,
+  accessors = DATE_ACCESSORS,
+  settings,
+  labels,
+}) => {
   data = sortTimeSeries(data);
   const colors = settings?.colors;
   const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);

frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts

@@ -6,10 +6,6 @@ export const TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS = {
     ["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",

frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/TimeSeriesWaterfallChart.jsx

@@ -19,13 +19,14 @@ import {
   getWaterfallEntryColor,
 } from "metabase/static-viz/lib/waterfall";
 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,
-  }).isRequired,
+  }),
   settings: PropTypes.shape({
     x: PropTypes.object,
     y: PropTypes.object,
@@ -66,7 +67,12 @@ const layout = {
   strokeDasharray: "4",
 };
 
-const TimeSeriesWaterfallChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesWaterfallChart = ({
+  data,
+  accessors = DATE_ACCESSORS,
+  settings,
+  labels,
+}) => {
   data = sortTimeSeries(data);
   const colors = settings?.colors;
   const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);

frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts

@@ -12,10 +12,6 @@ export const TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS = {
     ["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",

frontend/src/metabase/static-viz/constants/accessors.ts

+export const POSITIONAL_ACCESSORS = {
+  x: (row: any[]) => row[0],
+  y: (row: any[]) => row[1],
+};
+
+export const DATE_ACCESSORS = {
+  x: (row: any[]) => new Date(row[0]).valueOf(),
+  y: (row: any[]) => row[1],
+};
+
+export const DIMENSION_ACCESSORS = {
+  dimension: (row: any[]) => row[0],
+  metric: (row: any[]) => row[1],
+};