fix: show only necessary tick labels on log scale (#19)

* fix: show only necessary ticks on log scale and add storybook * fix: storybook path
apache · Nov 26, 2021 · 49a6951 · 49a6951
1 parent 54f15d7
commit 49a6951
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/.../plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/.../plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -573,6 +573,11 @@ function nvd3Vis(element, props) {
       .attr('width', width)
       .call(chart);
 
+    // For log scale, only show 1, 10, 100, 1000, ...
+    if (yIsLogScale) {
+      chart.yAxis.tickFormat(d => (Math.log10(d) % 1 === 0 ? yAxisFormatter(d) : ''));
+    }
+
     if (xLabelRotation > 0) {
       // shift labels to the left so they look better
       const xTicks = svg.select('.nv-x.nv-axis > g').selectAll('g');

diff --git a/...s/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.jsx b/...s/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.jsx
@@ -0,0 +1,29 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="line"
+        chartProps={{
+          datasource: { verboseMap: {} },
+          formData: {
+            richTooltip: true,
+            vizType: 'line',
+            yAxisBounds: [1, 60000],
+            yAxisFormat: ',d',
+            yLogScale: true,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Log scale',
+    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
+  },
+];
diff --git a/...ackages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/index.js b/...ackages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/index.js
@@ -1,9 +1,10 @@
 import { LineChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-nvd3';
 import Stories from './Stories';
 import YAxisStories from './YAxisStories';
+import LogStories from './LogStories';
 
 new LineChartPlugin().configure({ key: 'line' }).register();
 
 export default {
-  examples: [...Stories, ...YAxisStories],
+  examples: [...Stories, ...YAxisStories, ...LogStories],
 };