Allow the X and Y tick format to be customized using a D3 format stri…

…ng (#6370) Numbers: https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/ Date/Time: https://d3-wiki.readthedocs.io/zh_CN/master/Time-Formatting/
getredash · Aug 16, 2023 · 0f88a23 · 0f88a23
1 parent 4a5c9c2
commit 0f88a23
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 1 deletion.
diff --git a/client/cypress/support/visualizations/chart.js b/client/cypress/support/visualizations/chart.js
@@ -80,6 +80,10 @@ export function assertAxesAndAddLabels(xaxisLabel, yaxisLabel) {
     .clear()
     .type(yaxisLabel);
 
+  cy.getByTestId("Chart.LeftYAxis.TickFormat")
+    .clear()
+    .type("+");
+
   cy.getByTestId("VisualizationEditor.Tabs.General").click();
 }
 

diff --git a/viz-lib/src/components/visualizations/editor/ContextHelp.tsx b/viz-lib/src/components/visualizations/editor/ContextHelp.tsx
@@ -53,5 +53,18 @@ function DateTimeFormatSpecs() {
   );
 }
 
+function TickFormatSpecs() {
+  const { HelpTriggerComponent } = visualizationsSettings;
+  return (
+    <HelpTriggerComponent
+      title="Tick Formatting"
+      href="https://redash.io/help/user-guide/visualizations/formatting-axis"
+      className="visualization-editor-context-help">
+      {ContextHelp.defaultIcon}
+    </HelpTriggerComponent>
+  );
+}
+
 ContextHelp.NumberFormatSpecs = NumberFormatSpecs;
 ContextHelp.DateTimeFormatSpecs = DateTimeFormatSpecs;
+ContextHelp.TickFormatSpecs = TickFormatSpecs;
diff --git a/viz-lib/src/visualizations/chart/Editor/AxisSettings.tsx b/viz-lib/src/visualizations/chart/Editor/AxisSettings.tsx
@@ -2,7 +2,7 @@ import { isString, isObject, isFinite, isNumber, merge } from "lodash";
 import React from "react";
 import { useDebouncedCallback } from "use-debounce";
 import * as Grid from "antd/lib/grid";
-import { Section, Select, Input, InputNumber } from "@/components/visualizations/editor";
+import { Section, Select, Input, InputNumber, ContextHelp } from "@/components/visualizations/editor";
 
 function toNumber(value: any) {
   value = isNumber(value) ? value : parseFloat(value);
@@ -18,6 +18,7 @@ type OwnProps = {
     };
     rangeMin?: number;
     rangeMax?: number;
+    tickFormat?: string;
   };
   features?: {
     autoDetectType?: boolean;
@@ -40,6 +41,8 @@ export default function AxisSettings({ id, options, features, onChange }: Props)
 
   const [handleMinMaxChange] = useDebouncedCallback(opts => optionsChanged(opts), 200);
 
+  const [handleTickFormatChange] = useDebouncedCallback(opts => optionsChanged(opts), 200);
+
   return (
     <React.Fragment>
       {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
@@ -89,6 +92,21 @@ export default function AxisSettings({ id, options, features, onChange }: Props)
         />
       </Section>
 
+      {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+      <Section>
+        <Input
+          label={
+            <React.Fragment>
+              Tick Format
+              <ContextHelp.TickFormatSpecs />
+            </React.Fragment>
+          }
+          data-test={`Chart.${id}.TickFormat`}
+          defaultValue={options.tickFormat}
+          onChange={(event: any) => handleTickFormatChange({ tickFormat: event.target.value })}
+        />
+      </Section>
+
       {features.range && (
         // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
         <Section>

diff --git a/viz-lib/src/visualizations/chart/Editor/XAxisSettings.test.tsx b/viz-lib/src/visualizations/chart/Editor/XAxisSettings.test.tsx
@@ -55,6 +55,20 @@ describe("Visualizations -> Chart -> Editor -> X-Axis Settings", () => {
       .simulate("change", { target: { value: "test" } });
   });
 
+  test("Changes axis tick format", done => {
+    const el = mount(
+      {
+        globalSeriesType: "column",
+        xAxis: { },
+      },
+      done
+    );
+
+    findByTestID(el, "Chart.XAxis.TickFormat")
+      .last()
+      .simulate("change", { target: { value: "%B" } });
+  });
+
   test("Sets Show Labels option", done => {
     const el = mount(
       {

diff --git a/viz-lib/src/visualizations/chart/Editor/YAxisSettings.test.tsx b/viz-lib/src/visualizations/chart/Editor/YAxisSettings.test.tsx
@@ -59,6 +59,20 @@ describe("Visualizations -> Chart -> Editor -> Y-Axis Settings", () => {
       .simulate("change", { target: { value: "test" } });
   });
 
+  test("Changes axis tick format", done => {
+    const el = mount(
+      {
+        globalSeriesType: "column",
+        yAxis: [],
+      },
+      done
+    );
+
+    findByTestID(el, "Chart.LeftYAxis.TickFormat")
+      .last()
+      .simulate("change", { target: { value: "s" } });
+  });
+
   test("Changes axis min value", done => {
     const el = mount(
       {

diff --git a/viz-lib/src/visualizations/chart/Editor/__snapshots__/XAxisSettings.test.tsx.snap b/viz-lib/src/visualizations/chart/Editor/__snapshots__/XAxisSettings.test.tsx.snap
@@ -14,6 +14,18 @@ Object {
 }
 `;
 
+exports[`Visualizations -> Chart -> Editor -> X-Axis Settings Changes axis tick format 1`] = `
+Object {
+  "xAxis": Object {
+    "labels": Object {
+      "enabled": true,
+    },
+    "tickFormat": "%B",
+    "type": "-",
+  },
+}
+`;
+
 exports[`Visualizations -> Chart -> Editor -> X-Axis Settings Changes axis type 1`] = `
 Object {
   "xAxis": Object {

diff --git a/viz-lib/src/visualizations/chart/Editor/__snapshots__/YAxisSettings.test.tsx.snap b/viz-lib/src/visualizations/chart/Editor/__snapshots__/YAxisSettings.test.tsx.snap
@@ -47,6 +47,21 @@ Object {
 }
 `;
 
+exports[`Visualizations -> Chart -> Editor -> Y-Axis Settings Changes axis tick format 1`] = `
+Object {
+  "yAxis": Array [
+    Object {
+      "tickFormat": "s",
+      "type": "linear",
+    },
+    Object {
+      "opposite": true,
+      "type": "linear",
+    },
+  ],
+}
+`;
+
 exports[`Visualizations -> Chart -> Editor -> Y-Axis Settings Changes axis type 1`] = `
 Object {
   "yAxis": Array [

diff --git a/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts b/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts
@@ -21,6 +21,7 @@ function prepareXAxis(axisOptions: any, additionalOptions: any) {
     title: getAxisTitle(axisOptions),
     type: getAxisScaleType(axisOptions),
     automargin: true,
+    tickformat: axisOptions.tickFormat,
   };
 
   if (additionalOptions.sortX && axis.type === "category") {
@@ -48,6 +49,7 @@ function prepareYAxis(axisOptions: any) {
     automargin: true,
     autorange: true,
     range: null,
+    tickformat: axisOptions.tickFormat,
   };
 }