diff --git a/api/charts.api.md b/api/charts.api.md index 62af02c8cb..020256230e 100644 --- a/api/charts.api.md +++ b/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; diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..fe5673134b Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png differ diff --git a/package.json b/package.json index b04ceb6053..0df956c054 100644 --- a/package.json +++ b/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", diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts b/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts index fc2c81f972..f97dc191b3 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts +++ b/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, diff --git a/src/chart_types/xy_chart/utils/axis_utils.ts b/src/chart_types/xy_chart/utils/axis_utils.ts index 5c8abfdceb..17a5d324fd 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.ts +++ b/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, diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts index afdbf1b1ca..02d2e749bf 100644 --- a/src/chart_types/xy_chart/utils/specs.ts +++ b/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 */ diff --git a/stories/axes/13_label_formatting.tsx b/stories/axes/13_label_formatting.tsx new file mode 100644 index 0000000000..b78337db7a --- /dev/null +++ b/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 ( + + numeral(d).format(tickFormatBottom)} + labelFormat={(d) => numeral(d).format(labelFormatBottom)} + /> + numeral(d).format(tickFormatLeft)} + labelFormat={(d) => numeral(d).format(labelFormatLeft)} + /> + + + + ); +}; + +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`, + }, + }, +}; diff --git a/stories/axes/axes.stories.tsx b/stories/axes/axes.stories.tsx index c5fa0c2eb0..1831805150 100644 --- a/stories/axes/axes.stories.tsx +++ b/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';