feat(axis): formatting different for label vs tooltip and legend (#750)

api/charts.api.md

@@ -147,6 +147,7 @@ export interface AxisSpec extends Spec {
     hide: boolean;
     id: AxisId;
     integersOnly?: boolean;
+    labelFormat?: TickFormatter;
     position: Position;
     showDuplicatedTicks?: boolean;
     showGridLines?: boolean;

package.json

@@ -178,6 +178,7 @@
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.27",
     "node-sass": "^4.14.1",
+    "numeral": "^2.0.6",
     "postcss-cli": "^7.1.1",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.0",

src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts

@@ -37,7 +37,7 @@ export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, p
   };
 
   const {
-    axisSpec: { tickSize, tickPadding, position },
+    axisSpec: { tickSize, tickPadding, position, labelFormat },
     axisTicksDimensions,
     axisPosition,
     debug,
@@ -94,7 +94,7 @@ export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, p
         x: x + textOffsetX,
         y: y + textOffsetY,
       },
-      tick.label,
+      labelFormat ? labelFormat(tick.value) : tick.label,
       {
         ...font,
         fontSize: labelStyle.fontSize,

src/chart_types/xy_chart/utils/axis_utils.ts

@@ -104,7 +104,7 @@ export function computeAxisTicksDimensions(
 
   const dimensions = computeTickDimensions(
     scale,
-    axisSpec.tickFormat,
+    axisSpec.labelFormat ?? axisSpec.tickFormat,
     bboxCalculator,
     axisConfig,
     tickLabelPadding,

src/chart_types/xy_chart/utils/specs.ts

@@ -602,8 +602,16 @@ export interface AxisSpec extends Spec {
   tickSize: number;
   /** The padding between the label and the tick */
   tickPadding: number;
-  /** A function called to format each single tick label */
+  /**
+   * A function called to format every single tick label (includes tooltip)
+   */
   tickFormat: TickFormatter;
+  /**
+   * A function called to format every single label  (excludes tooltip)
+   *
+   * overrides tickFormat for axis labels
+   */
+  labelFormat?: TickFormatter;
   /** The degrees of rotation of the tick labels */
   tickLabelRotation?: number;
   /** An approximate count of how many ticks will be generated */

stories/axes/13_label_formatting.tsx

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { text } from '@storybook/addon-knobs';
+import numeral from 'numeral';
+import React from 'react';
+
+import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType } from '../../src';
+import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+import { SB_SOURCE_PANEL } from '../utils/storybook';
+
+export const Example = () => {
+  const tickFormatBottom = text('tickFormat bottom', '0.0000');
+  const labelFormatBottom = text('labelFormat bottom', '0.0');
+  const tickFormatLeft = text('tickFormat left', '$ 0,0[.]00');
+  const labelFormatLeft = text('labelFormat left', '$ 0,0');
+  const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0];
+  const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 20).map((d) => [(d[0] - start) / 30000, d[1]]);
+
+  return (
+    <Chart className="story-chart">
+      <Axis
+        id="bottom"
+        title="Weight"
+        position={Position.Bottom}
+        tickFormat={(d) => numeral(d).format(tickFormatBottom)}
+        labelFormat={(d) => numeral(d).format(labelFormatBottom)}
+      />
+      <Axis
+        id="left"
+        title="Price"
+        position={Position.Left}
+        tickFormat={(d) => numeral(d).format(tickFormatLeft)}
+        labelFormat={(d) => numeral(d).format(labelFormatLeft)}
+      />
+
+      <AreaSeries
+        id="areas"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        data={data}
+        curve={CurveType.CURVE_MONOTONE_X}
+      />
+    </Chart>
+  );
+};
+
+Example.story = {
+  parameters: {
+    options: { selectedPanel: SB_SOURCE_PANEL },
+    info: {
+      text: `You can apply different formatter between tick values in the tooltip and legend by using
+      different values for \`tickFormat\` and \`labelFormat\`.
+
+Use a [numeraljs](http://numeraljs.com/) format with the knobs to see the difference`,
+    },
+  },
+};

stories/axes/axes.stories.tsx

@@ -38,3 +38,4 @@ export { Example as customMixed } from './9_custom_mixed_domain';
 export { Example as oneDomainBound } from './10_one_domain_bound';
 export { Example as fitDomain } from './11_fit_domain_extent';
 export { Example as duplicateTicks } from './12_duplicate_ticks';
+export { Example as labelFormatting } from './13_label_formatting';