feat: add series name settings by nickofthyme · Pull Request #539 · elastic/elastic-charts

nickofthyme · 2020-02-06T19:27:52Z

Summary

Related to #537 (interim fix)

BREAKING CHANGE:
Remove customSubSeriesName prop on series specs in favor of cleaner api using just the name prop on SeriesSpec. The types SeriesStringPredicate, SubSeriesStringPredicate have been removed.

The name prop is defined below...

type SeriesNameAccessor = string | SeriesNameFn | SeriesNameConfigOptions;
// where

export interface SeriesSpec extends Spec {
  ...
  /**
   * The name of the spec. Also a mechanism to provide custom series names.
   */
  name?: SeriesNameAccessor;
  ...
}

This original function type definition is the same

type SeriesName = string | number | null;
type SeriesNameFn = (series: SeriesIdentifier, isTooltip: boolean) => SeriesName;

However the SeriesStringPredicate is now a union type between SeriesNameFn and the new getSeriesNameFromOptions type defined below.

export interface SeriesNameConfig {
  /**
   * accessor key (i.e. `yAccessors` and `seriesSplitAccessors`)
   */
  accessor: string | number;
  /**
   * Accessor value (i.e. values from `seriesSplitAccessors`)
   */
  value?: string | number;
  /**
   * New name for Accessor value
   *
   * If not provided, the original value will be used
   */
  name?: string | number;
  /**
   * Sort order of label, overrides order listed in array.
   *
   * lower values - front most
   * higher values - end most
   */
  sortIndex?: number;
}
export interface SeriesNameConfigOptions {
  /**
   * Array of accessor naming configs to replace series names
   *
   * Only provided configs will be included
   * (i.e. if you only provide a single mapping for `yAccessor`, all other series accessor labels will be ignored)
   *
   * The order of configs is the order in which the resulting labels will
   * be joined, if no `sortIndex` is specified.
   *
   * If no values are found for a giving mapping in a series, the mapping will be ignored.
   */
  names?: SeriesNameConfig[];
  /**
   * Delimiter to join values/labels
   *
   * @default ' - '
   */
  delimiter?: string;
}

Note: The order of the names array is used to join the names

Mappings Examples

const data = [
  {
    x: 0,
    y1: 'speed',
    y2: 'acceleration',
    g: 'ferrari',
  },
  {
    x: 1,
    y1: 'speed',
    y2: 'acceleration',
    g: 'porsche',
  },
]

Replace yAccessors

<LineSeries
  data={data}
  xAccessor="x"
  yAccessors={['speed', 'acceleration']}
  splitSeriesAccessors={['g']}
  customSubSeriesName={{
    names: [
      {
        accessor: 'g',
        value: 'ferrari',
      },
      {
        accessor: 'g',
        value: 'porsche',
      },
      {
        accessor: 'speed',
        name: 'm/s',
      },
      {
        value: 'acceleration',
        name: 'm/s/s',
      },
    ],
  }}
/>

Default names	Custom mapped Names
`ferrari - speed`	`ferrari - m/s`
`ferrari - acceleration`	`ferrari - m/s/s`
`porsche - speed`	`porsche - m/s`
`porsche - acceleration`	`porsche - m/s/s`

Replace splitAccessors and reorder with `delimiter`

<LineSeries
  data={data}
  xAccessor="x"
  yAccessors={['speed', 'acceleration']}
  splitSeriesAccessors={['g']}
  customSubSeriesName={{
    names: [
      {
        accessor: 'speed',
      },
      {
        accessor: 'acceleration',
      },
      {
        accessor: 'g',
        value: 'ferrari',
        name: 'Ferrari',
      },
      {
        accessor: 'g',
        value: 'porsche',
        name: 'Porsche',
      },
    ],
    delimiter: ' : ',
  }}
/>

Default names	Custom mapped Names
`ferrari - speed`	`speed : Ferrari`
`ferrari - acceleration`	`acceleration : Ferrari`
`porsche - speed`	`speed : Porsche`
`porsche - acceleration`	`acceleration : Porsche`

Single series

<LineSeries
  data={data}
  xAccessor="x"
  yAccessors={['speed']}
  splitSeriesAccessors={['g']}
  customSubSeriesName={{
    names: [
      {
        accessor: 'g',
        value: 'ferrari',
        name: 'Ferrari',
      },
      {
        accessor: 'g',
        value: 'porsche',
        name: 'Porsche',
      },
      // This name be excluded from the name if not in the array
      // {
      //   accessor: 'speed',
      // },
    ],
  }}
/>

Default names	Custom mapped Names
`ferrari`	`Ferrari`
`porsche`	`Porsche`

See test cases for more examples

Checklist

Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
Proper documentation or storybook story was added for features that require explanation or tutorials
Unit tests were updated or added to match the most common scenarios
Each commit follows the convention

codecov-io · 2020-02-10T16:27:34Z

Codecov Report

Merging #539 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #539   +/-   ##
=======================================
  Coverage   71.83%   71.83%           
=======================================
  Files         212      212           
  Lines        6142     6142           
  Branches     1181     1181           
=======================================
  Hits         4412     4412           
  Misses       1711     1711           
  Partials       19       19

Impacted Files	Coverage Δ
src/chart_types/xy_chart/utils/series.ts	`98.87% <ø> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 264980d...9a6828e. Read the comment docs.

markov00 · 2020-02-10T17:17:14Z

Hi @nickofthyme I've few doubts on this PR because the same effect can be achieved with the available props like the following:

customSeriesLabel={(args) => {
    return args.seriesKeys.join(' ~~ ');
}}

or

customSeriesLabel={(args) => {
    return args.seriesKeys.slice(0, args.seriesKeys.length -1).join(' ~~ ');
}}

Users are always a bit reluctant to use Maps object (I remember most of them commenting on a simplified version) that could be in fact achieved with a simple object {a: 'apple'}

One other way we could think about this feature: what if we provide a set of utility function for this cases?
like:

function fullSeries(delimiter: string = ' - ') {
  return (args) => {
      return args.seriesKeys.join(delimiter);
  }
}

function simpleSeries(delimiter: string = ' - ') {
  return (args) => {
      return args.seriesKeys.slice(0, args.seriesKeys.length -1).join(delimiter);
  }
}

this will allow much more configurability and doesn't pollute the, already polluted, set of props we have in the chart components.

What do you think?

markov00

Thanks Nick for that, seems everything fine except few small typos.
I've added few nit commits that can be ignored but i think it's useful if the discuss them

src/chart_types/xy_chart/utils/specs.ts

.playground/playground.tsx

src/chart_types/xy_chart/utils/specs.ts

Move `Datum`, `Rotation`, `Position` and `Color` to `utils/commons`. Decouple legend from axis position method and move the `scales` to `utils/scales`.

markov00

Everything looks good, I've left few minor comments and one major related to the accessor type that should be resolved

src/chart_types/xy_chart/utils/series.test.ts

src/chart_types/xy_chart/utils/specs.ts

src/chart_types/xy_chart/utils/series.ts

src/chart_types/xy_chart/utils/specs.ts

This commit will decouple the tooltip component from the XY chart to allow Partition and other chart type an ease use. BREAKING CHANGE: the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default. close elastic#246

markov00

Everything LGTM, I've left few small comments

src/chart_types/xy_chart/utils/series.ts

markov00 · 2020-02-24T17:05:39Z

jenkins test this

Refactor name prop on SeriesSpec to take custom naming props to name series. BREAKING CHANGE: Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed.

# [18.0.0](v17.1.1...v18.0.0) (2020-03-17) ### Code Refactoring * clean up TS types ([#554](#554)) ([22f7635](22f7635)), closes [#547](#547) [#547](#547) * decouple tooltip from XY chart ([#553](#553)) ([e70792e](e70792e)), closes [#246](#246) ### Features * cleaner color API on SeriesSpec ([#571](#571)) ([f769f7c](f769f7c)) * **legend:** allow color picker component render prop ([#545](#545)) ([90f4b95](90f4b95)) * **partition:** add element click, over and out events ([#578](#578)) ([103df02](103df02)) * **partition:** add tooltip ([#544](#544)) ([6bf9a69](6bf9a69)), closes [#246](#246) * percentage display in partitioning charts ([#558](#558)) ([d6aa8d7](d6aa8d7)) * specify series name with a function on SeriesSpec ([#539](#539)) ([358455a](358455a)) * xAccessor can be a function accessor ([#574](#574)) ([bcc3d63](bcc3d63)) ### BREAKING CHANGES * The `getSpecId`, `getGroupId`, `getAxisId` and `getAnnotationId` are no longer available. Use a simple `string` instead. * `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`. * Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed. * the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

# [18.0.0](elastic/elastic-charts@v17.1.1...v18.0.0) (2020-03-17) ### Code Refactoring * clean up TS types ([opensearch-project#554](elastic/elastic-charts#554)) ([6ce56fa](elastic/elastic-charts@6ce56fa)), closes [opensearch-project#547](elastic/elastic-charts#547) [opensearch-project#547](elastic/elastic-charts#547) * decouple tooltip from XY chart ([opensearch-project#553](elastic/elastic-charts#553)) ([cb02cd0](elastic/elastic-charts@cb02cd0)), closes [opensearch-project#246](elastic/elastic-charts#246) ### Features * cleaner color API on SeriesSpec ([opensearch-project#571](elastic/elastic-charts#571)) ([6a78c4e](elastic/elastic-charts@6a78c4e)) * **legend:** allow color picker component render prop ([opensearch-project#545](elastic/elastic-charts#545)) ([22ef1e6](elastic/elastic-charts@22ef1e6)) * **partition:** add element click, over and out events ([opensearch-project#578](elastic/elastic-charts#578)) ([4189573](elastic/elastic-charts@4189573)) * **partition:** add tooltip ([opensearch-project#544](elastic/elastic-charts#544)) ([0cffed4](elastic/elastic-charts@0cffed4)), closes [opensearch-project#246](elastic/elastic-charts#246) * percentage display in partitioning charts ([opensearch-project#558](elastic/elastic-charts#558)) ([993a448](elastic/elastic-charts@993a448)) * specify series name with a function on SeriesSpec ([opensearch-project#539](elastic/elastic-charts#539)) ([fc6430b](elastic/elastic-charts@fc6430b)) * xAccessor can be a function accessor ([opensearch-project#574](elastic/elastic-charts#574)) ([f702e2c](elastic/elastic-charts@f702e2c)) ### BREAKING CHANGES * The `getSpecId`, `getGroupId`, `getAxisId` and `getAnnotationId` are no longer available. Use a simple `string` instead. * `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`. * Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed. * the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

feat: add series label settings

a6ead1c

nickofthyme added enhancement New feature or request :legend Legend related issue :tooltip Related to hover tooltip labels Feb 6, 2020

nickofthyme requested a review from markov00 February 6, 2020 19:27

markov00 mentioned this pull request Feb 6, 2020

[meta] Vislib chart replacement #66

Closed

27 tasks

nickofthyme added 3 commits February 10, 2020 12:17

tests: update tests

ebd5fcc

Merge branch 'master' into feat/add-labeling-options

9bc6baa

chore: udpate pr comments

f6e6d90

nickofthyme marked this pull request as ready for review February 10, 2020 19:53

chore: fix type/lint errors

88cecd1

elastic deleted a comment from robgil Feb 11, 2020

elastic deleted a comment from codecov-io Feb 11, 2020

refactor: update custom series label api

6e9ee73

markov00 reviewed Feb 12, 2020

View reviewed changes

markov00 and others added 4 commits February 13, 2020 13:01

chore: add parsing action and split tooltipValues (elastic#516)

f056b77

refactor: decouple legend and tooltip phase 1 (elastic#491)

2242fca

Move `Datum`, `Rotation`, `Position` and `Color` to `utils/commons`. Decouple legend from axis position method and move the `scales` to `utils/scales`.

Merge branch 'master' into feat/add-labeling-options

fd759be

refactor: move custom labeling to name and update logic

a1b1950

nickofthyme requested a review from markov00 February 18, 2020 22:08

docs: fix filteredLabel ids (elastic#552)

8262d19

nickofthyme mentioned this pull request Feb 19, 2020

refactor: decouple tooltip from XY chart #553

Merged

5 tasks

nickofthyme added 2 commits February 19, 2020 13:06

Fix story naming

c7fd818

Merge branch 'master' into feat/add-labeling-options

4298157

markov00 reviewed Feb 20, 2020

View reviewed changes

markov00 and others added 3 commits February 20, 2020 14:53

chore: address pr comments

55f9712

Merge branch 'master' into feat/add-labeling-options

15eb37f

nickofthyme requested a review from markov00 February 20, 2020 17:32

chore: update screenshots

76f000f

nickofthyme force-pushed the master branch from b5d8489 to f3a05f1 Compare February 21, 2020 15:18

nickofthyme added 3 commits February 21, 2020 13:04

Merge branch 'master' into feat/add-labeling-options

264980d

Merge branch 'master' into feat/add-labeling-options

f8ba94a

udpate screenshots

9dcb740

markov00 approved these changes Feb 24, 2020

View reviewed changes

src/chart_types/xy_chart/utils/series.ts Show resolved Hide resolved

src/chart_types/xy_chart/utils/series.ts Outdated Show resolved Hide resolved

src/chart_types/xy_chart/utils/series.ts Show resolved Hide resolved

chore: address pr comments

9a6828e

markov00 approved these changes Feb 24, 2020

View reviewed changes

nickofthyme changed the title ~~feat: add series label settings~~ feat: add series name settings Feb 24, 2020

nickofthyme merged commit ba43ccd into elastic:master Feb 24, 2020

nickofthyme deleted the feat/add-labeling-options branch February 24, 2020 18:48

markov00 mentioned this pull request Feb 28, 2020

Allow customization of sub series names #245

Closed

3 tasks

markov00 mentioned this pull request Mar 18, 2020

Update dependency @elastic/charts to v18.1.0 elastic/kibana#60578

Merged

2 tasks

Conversation

nickofthyme commented Feb 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Mappings Examples

Replace yAccessors

Replace splitAccessors and reorder with delimiter

Single series

Checklist

Uh oh!

codecov-io commented Feb 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

markov00 commented Feb 10, 2020

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 commented Feb 24, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nickofthyme commented Feb 6, 2020 •

edited

Loading

Replace splitAccessors and reorder with `delimiter`

codecov-io commented Feb 10, 2020 •

edited

Loading