Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: blind sorting option for vislib #813

Merged
merged 2 commits into from
Sep 10, 2020

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Sep 9, 2020

Summary

Allows a blind sorting option on Settings called enableVislibSeriesSort to loop through all yAccessors then all the data.

This option is bind as in not added to the SettingSpec to avoid usage, outside of vislib, until #795 allows a sorting alternative.

Screenshot

Screen Recording 2020-09-09 at 10 50 AM

Notice the change in the order of the y accessors between the options.

Sample playground

import React from 'react';

import { Chart, Settings, Position, Axis, BarSeries, ScaleType } from '../src';

const data = [
  // Flight Delay Minutes |	Cancelled: Descending |	OriginAirportID: Descending	Count |	Max AvgTicketPrice
  { x: 0, g1: 'false', g2: 'USA', y1: 2, y2: 847.323974609375 },
  { x: 0, g1: 'true', g2: 'Canada', y1: 1, y2: 652.268005371094 },
  { x: 30, g1: 'false', g2: 'Canada', y1: 5, y2: 1127.20959472656 },
  { x: 30, g1: 'true', g2: 'USA', y1: 1, y2: 214.78987121582 },
  { x: 60, g1: 'false', g2: 'Canada', y1: 4, y2: 990.88916015625 },
  { x: 60, g1: 'true', g2: 'USA', y1: 1, y2: 724.3603515625 },
  { x: 90, g1: 'false', g2: 'USA', y1: 3, y2: 951.81787109375 },
  { x: 90, g1: 'true', g2: 'USA', y1: 1, y2: 430.475891113281 },
  { x: 120, g1: 'false', g2: 'Canada', y1: 2, y2: 447.469512939453 },
  { x: 120, g1: 'true', g2: 'Canada', y1: 1, y2: 834.467712402344 },
  { x: 150, g1: 'false', g2: 'Canada', y1: 2, y2: 887.178100585938 },
  { x: 150, g1: 'true', g2: 'Canada', y1: 1, y2: 1176.63818359375 },
  { x: 180, g1: 'false', g2: 'USA', y1: 2, y2: 985.899963378906 },
  { x: 180, g1: 'true', g2: 'Canada', y1: 1, y2: 441.242462158203 },
  { x: 210, g1: 'false', g2: 'Canada', y1: 3, y2: 732.609436035156 },
  { x: 210, g1: 'true', g2: 'USA', y1: 1, y2: 728.790283203125 },
  { x: 240, g1: 'false', g2: 'Canada', y1: 3, y2: 526.108581542969 },
  { x: 240, g1: 'true', g2: 'USA', y1: 2, y2: 759.218139648438 },
  { x: 270, g1: 'false', g2: 'USA', y1: 3, y2: 754.231323242188 },
  { x: 270, g1: 'true', g2: 'Canada', y1: 1, y2: 574.996276855469 },
  { x: 300, g1: 'false', g2: 'Canada', y1: 4, y2: 946.468078613281 },
  { x: 300, g1: 'true', g2: 'Canada', y1: 2, y2: 999.1396484375 },
  { x: 330, g1: 'false', g2: 'USA', y1: 2, y2: 881.044494628906 },
  { x: 330, g1: 'true', g2: 'Canada', y1: 1, y2: 382.457763671875 },
  { x: 360, g1: 'false', g2: 'Canada', y1: 2, y2: 1165.59765625 },
  { x: 360, g1: 'true', g2: 'Canada', y1: 1, y2: 820.462463378906 },
];

export class Playground extends React.Component {
  render() {
    return (
      <div className="testing">
        <div className="chart">
          <Chart className="story-chart">
            <Settings
              // @ts-ignore
              enableVislibSeriesSort
              showLegend
              showLegendExtra
              legendPosition={Position.Right}
            />
            <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
            <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />

            <BarSeries
              id="bars1"
              xScaleType={ScaleType.Linear}
              yScaleType={ScaleType.Linear}
              xAccessor="x"
              yAccessors={['y1', 'y2']}
              splitSeriesAccessors={['g1', 'g2']}
              data={data}
            />
          </Chart>
        </div>
      </div>
    );
  }
}

Checklist

  • Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
  • Unit tests were updated or added to match the most common scenarios

@nickofthyme nickofthyme added :data Data/series/scales related issue :specs Chart specifications related issue :vislib Relating to vislib replacement labels Sep 9, 2020
@nickofthyme nickofthyme requested a review from markov00 September 9, 2020 16:06
Copy link
Contributor

@monfera monfera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will continue comparing logic after the asked changes are addressed, if it's okay

@@ -38,6 +38,8 @@ export const computeSeriesDomainsSelector = createCachedSelector(
customYDomainsByGroupId,
deselectedDataSeries,
settingsSpec.xDomain,
// @ts-ignore blind sort option for vislib
settingsSpec.vislibSort,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though planned as temporary, let's use a name that tells what it is, even if it's longer, than what's otherwise a temporarily good name that'll become cryptic

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const x = getAccessorValue(datum, xAccessor);
// skip if the datum is not an object or null
if (typeof datum !== 'object' || datum === null) {
return null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're in a forEach, no need to return a value

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

xValues.push(x);
// skip if the x value is not a string or a number
if (typeof x !== 'string' && typeof x !== 'number') {
return null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

});
});
} else {
data.forEach((datum) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a level of code duplication in the branch, it'd be OK to distinguish between the cases in a more fine grained way


// skip if the datum is not an object or null
if (typeof datum !== 'object' || datum === null) {
return null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't repeat comments on like things as they'd go away upon DRYing up the code


xValues.push(x);

yAccessors.forEach((accessor, index) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The DRY approach would also favor code review as now it's a bit hard to contrast how the added logic deviates from the preexisting version

@codecov-commenter
Copy link

Codecov Report

Merging #813 into master will increase coverage by 0.23%.
The diff coverage is 58.49%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #813      +/-   ##
==========================================
+ Coverage   74.33%   74.57%   +0.23%     
==========================================
  Files         273      288      +15     
  Lines        9321     9627     +306     
  Branches     2009     2058      +49     
==========================================
+ Hits         6929     7179     +250     
- Misses       2384     2435      +51     
- Partials        8       13       +5     
Flag Coverage Δ
#unittests 74.18% <58.49%> (-0.16%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...xy_chart/state/selectors/compute_series_domains.ts 100.00% <ø> (ø)
src/chart_types/xy_chart/utils/series.ts 87.05% <57.69%> (-8.50%) ⬇️
src/chart_types/xy_chart/state/utils/utils.ts 92.49% <100.00%> (ø)
src/mocks/specs/index.ts 100.00% <0.00%> (ø)
src/mocks/scale/scale.ts 77.77% <0.00%> (ø)
src/mocks/series/data.ts 100.00% <0.00%> (ø)
src/mocks/series/series.ts 88.13% <0.00%> (ø)
src/mocks/store/index.ts 100.00% <0.00%> (ø)
src/mocks/series/index.ts 100.00% <0.00%> (ø)
src/mocks/index.ts 100.00% <0.00%> (ø)
... and 8 more

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 7af65c8...1182969. Read the comment docs.

@nickofthyme
Copy link
Collaborator Author

@monfera I would normally agree with your approach to be DRY, by maybe pulling the logic into a separate function that handles the checks and adding the value to the dataSeries if necessary, This would also require mutation the dataSeries Map from this helper function. However, in this case that seems a little excessive for a temporary use case that I imagine will soon be removed in favor of #795.

Would that be ok with you?

@monfera
Copy link
Contributor

monfera commented Sep 9, 2020

@nickofthyme thanks for the change, I'm fine with temporary non-DRYness there

@monfera monfera self-requested a review September 10, 2020 07:45
Copy link
Contributor

@monfera monfera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, with the understanding that the change is a relatively short term workaround (explaining the avoidance of semantic naming and more DRYness)

@nickofthyme nickofthyme merged commit 8afce43 into elastic:master Sep 10, 2020
@nickofthyme nickofthyme deleted the feat/vislib-sorting branch September 10, 2020 12:55
@nickofthyme nickofthyme added the :xy Bar/Line/Area chart related label Sep 10, 2020
markov00 pushed a commit that referenced this pull request Sep 14, 2020
# [21.2.0](v21.1.2...v21.2.0) (2020-09-14)

### Features

* blind sorting option for vislib ([#813](#813)) ([8afce43](8afce43))
* order ordinal values by sum ([#814](#814)) ([5b2758b](5b2758b))
* **series:** add simple mark formatter ([#775](#775)) ([ab95284](ab95284))
@markov00
Copy link
Member

🎉 This PR is included in version 21.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Sep 14, 2020
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:data Data/series/scales related issue released Issue released publicly :specs Chart specifications related issue :vislib Relating to vislib replacement :xy Bar/Line/Area chart related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants