feat: customize the yxis tick size and format (#167)

* feat: customize the Y axis tick size and format * fix issue * fix issue
carbon-design-system · Mar 1, 2022 · bca5ea8 · bca5ea8
1 parent 02d727d
commit bca5ea8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/components/LineGraph/LineGraph.js b/components/LineGraph/LineGraph.js
@@ -54,6 +54,8 @@ const propTypes = {
    * Set this prop to false to prevent x values from being converted to time.
    */
   isXTime: PropTypes.bool,
+  yAxisTickFormat: PropTypes.func,
+  yAxisTickSize: PropTypes.number,
 };
 
 const defaultProps = {
@@ -359,10 +361,13 @@ class LineGraph extends Component {
 
     this.yAxis = d3
       .axisLeft()
-      .ticks(4)
+      .ticks(this.props.yAxisTickSize ? this.props.yAxisTickSize : 4)
       .tickSize(-this.width)
       .scale(this.y.nice());
 
+    if (this.props.yAxisTickFormat) {
+      this.yAxis = this.yAxis.tickFormat(this.props.yAxisTickFormat);
+    }
     this.renderAxes();
     this.renderLabels();
     this.renderOverlay();

diff --git a/components/LineGraph/LineGraph.story.js b/components/LineGraph/LineGraph.story.js
@@ -168,6 +168,42 @@ storiesOf('LineGraph', module)
       onBlur={action('Blur')}
     />
   ))
+  .addWithInfo(
+    'Static Custom Y Axis',
+    ` Static Custom Y Axis' Example. `,
+    () => (
+      <LineGraph
+        datasets={[
+          [
+            [1, 1507563000000],
+            [-1, 1507563900000],
+            [0, 1507564800000],
+          ],
+          [
+            [-1, 1507563004000],
+            [0, 1507563900140],
+            [1, 1507564830000],
+          ],
+        ]}
+        yAxisTickSize={2}
+        yAxisTickFormat={val => {
+          if (val === 1) {
+            return 'running';
+          }
+          if (val === -1) {
+            return 'stopped';
+          }
+          if (val === 0) {
+            return 'unknown';
+          }
+          return '';
+        }}
+        onHover={action('Hover')}
+        onMouseOut={action('Mouseout')}
+        onBlur={action('Blur')}
+      />
+    )
+  )
   .addWithInfo('Number values for X', ` Static Example. `, () => (
     <LineGraph
       datasets={[

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-addons-data-viz-react",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Carbon Data Visualization",
   "main": "cjs/index.js",
   "module": "es/index.js",