Skip to content

feat: Chart responsible for its own theme#1772

Merged
bmingles merged 20 commits intodeephaven:mainfrom
bmingles:1728-chart-component-theme
Feb 13, 2024
Merged

feat: Chart responsible for its own theme#1772
bmingles merged 20 commits intodeephaven:mainfrom
bmingles:1728-chart-component-theme

Conversation

@bmingles
Copy link
Copy Markdown
Contributor

@bmingles bmingles commented Feb 5, 2024

This PR

  • Move theme colors down to layout.template.layout so that they are used as defaults. Some of the theme colors had to be set in layout.template.data for specific trace types
  • Chart component now responds to ChartTheme context changes (this should enable chart theme switching, but it depends on some follow up plugins repo work to complete it).

Testing
For now, we should just make sure charts behave as they did before. Not all charts will update in response to a theme change, but re-running queries should show the theme change. I have tested this and have not seen any changes to existing behavior introduced by this PR

Once the following plugins repo PRs have merged, the chart should fully respond to theme changes:
deephaven/deephaven-plugins#243
deephaven/deephaven-plugins#251

resolves #1728

BREAKING CHANGE:

  • Renamed ColorUtils.getColorwayFromTheme to normalizeColorway
  • Removed chartTheme arg from functions in ChartUtils, ChartModelFactory and FigureChartModel in @deephaven/chart

@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 5, 2024

Codecov Report

Attention: 26 lines in your changes are missing coverage. Please review.

Comparison is base (f7989b6) 46.07% compared to head (d278f1a) 46.05%.
Report is 5 commits behind head on main.

❗ Current head d278f1a differs from pull request most recent head a75b874. Consider uploading reports for the commit a75b874 to get more accurate results

Files Patch % Lines
packages/chart/src/Chart.tsx 0.00% 14 Missing ⚠️
packages/chart/src/MockChartModel.ts 0.00% 4 Missing ⚠️
packages/chart/src/ChartUtils.ts 75.00% 3 Missing ⚠️
...es/dashboard-core-plugins/src/ChartPanelPlugin.tsx 0.00% 2 Missing ⚠️
packages/chart/src/ChartModelFactory.ts 50.00% 1 Missing ⚠️
.../dashboard-core-plugins/src/ChartBuilderPlugin.tsx 0.00% 1 Missing ⚠️
...s/dashboard-core-plugins/src/ChartWidgetPlugin.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1772      +/-   ##
==========================================
- Coverage   46.07%   46.05%   -0.03%     
==========================================
  Files         628      628              
  Lines       37781    37771      -10     
  Branches     9516     9512       -4     
==========================================
- Hits        17409    17394      -15     
- Misses      20317    20323       +6     
+ Partials       55       54       -1     
Flag Coverage Δ
unit 46.05% <27.77%> (-0.03%) ⬇️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Copy Markdown
Collaborator

@mattrunyon mattrunyon left a comment

Choose a reason for hiding this comment

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

Looks like the padding on the styleguide snapshots got a little smaller for the charts. I'm guessing it's fine, but wanted to make sure it was a known change

Comment thread packages/chart/src/Chart.tsx Outdated
Comment thread packages/chart/src/Chart.tsx Outdated
Comment thread packages/chart/src/Chart.tsx Outdated
Comment thread packages/chart/src/ChartUtils.ts
Comment on lines 969 to 970
} else if (plotStyle === dh.plot.SeriesPlotStyle.PIE) {
seriesData.textinfo = 'label+percent';
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Do we want to move the other trace specific things to the template where possible? Could be a separate ticket

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Possibly? Since there are some things that will have to stay here, I'm not too worried about it.

Comment thread packages/chart/src/ChartUtils.ts Outdated
Comment thread packages/chart/src/ChartUtils.ts
Comment thread packages/chart/src/ChartUtils.ts Outdated
Comment thread packages/chart/src/FigureChartModel.ts Outdated
pattern: 'independent',
},
template,
template: this.chartUtils.makeDefaultTemplate(theme),
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It would be ideal if the model didn't need the theme at all, but looks like it does for some dynamic axis stuff still.

You should be able to remove the template at least because it's overridden by Chart anyway

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I did a bit of testing and you can remove theme from the updateFigureAxes call. The only spot where it ends up using it is to set the axis if one doesn't exist, but plotly applies from the template in that case it seems.

Just to test, get a subplotting example from here and then change something in makeLayoutAxis. I made the y axis zerolinecolor red and it properly applied to both series even w/o the assignment in updateLayoutAxes

That then leaves just the error bars in the model which I bet can remove the theme as well since you added it to the default template. I couldn't find a good example on the docs to test this though

* Fix some issues with plotly types.
*/

declare module 'plotly.js' {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Can this go in the root @types folder? I'd try putting it there to see if you get the same results. It is meant to serve as a central types override

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It doesn't seem to merge with the existing Plotly types when I do this

@bmingles bmingles force-pushed the 1728-chart-component-theme branch from bc5717f to 3aab67e Compare February 8, 2024 15:21
@bmingles bmingles requested a review from mattrunyon February 9, 2024 18:39
@bmingles
Copy link
Copy Markdown
Contributor Author

bmingles commented Feb 9, 2024

Looks like the padding on the styleguide snapshots got a little smaller for the charts. I'm guessing it's fine, but wanted to make sure it was a known change

This is a known change. The styleguide was overriding some of the default layout. Now that we have moved to template.layout, the defaults properly stay in place.

Comment thread packages/chart/src/ChartUtils.ts
Comment on lines -1329 to -1331
if (layout[axisLayoutProperty] == null) {
layout[axisLayoutProperty] = this.makeLayoutAxis(axisType, theme);
}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I wonder if this should set the axis to an empty object instead by default. Then the template part would still be applied by the template, but any other axis specifics (like range I think) should get applied to the axis. The code after calls updateLayoutAxis only if the axis exists. In subplots, the axis wouldn't exist (but it does seem to get created somewhere, I just don't know where)

layout: {
  xaxis: ...,
  xaxis2: { range: ... },
  template: {
    layout: {
      xaxis: { styleStuff }
    }
  }
}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Good call. Doing this allowed me to restore most of the full tests I had deleted before which feels better to me.

@bmingles bmingles requested a review from mattrunyon February 12, 2024 20:35
@bmingles bmingles force-pushed the 1728-chart-component-theme branch from d278f1a to caeb348 Compare February 12, 2024 22:46
@bmingles bmingles merged commit fabb055 into deephaven:main Feb 13, 2024
@bmingles bmingles deleted the 1728-chart-component-theme branch February 13, 2024 16:43
@github-actions github-actions Bot locked and limited conversation to collaborators Feb 13, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Theming - Chart component should be responsible for its theme

2 participants