feat(declarative-chart): Create Scatter plot #33843
Conversation
📊 Bundle size report✅ No changes found |
| @@ -225,17 +225,21 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = | |||
| ); | |||
There was a problem hiding this comment.
🕵🏾♀️ visual regressions to review in the fluentuiv8 Visual Regression Report
Callout 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Callout.No callout width specified.default.chromium.png | 2319 | Changed |
react-charting-HeatMapChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| react-charting-HeatMapChart.Basic - RTL.default.chromium.png | 372 | Changed |
react-charting-LineChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| react-charting-LineChart.Gaps.default.chromium.png | 1 | Changed |
|
Pull request demo site: URL |
packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
Outdated
Show resolved
Hide resolved
| @@ -43,6 +43,7 @@ import { | |||
| } from '../index'; | |||
| import { formatPrefix as d3FormatPrefix } from 'd3-format'; | |||
|
|
|||
| let maxMarkerSize = 0; | |||
There was a problem hiding this comment.
Yes, I agree with this. But maxMarkerSize is required at other place(createNumericYAxis) also in Utilites file where we don't have access to the line chart points from where we are calculating this. That is why I added this as global variable.
There was a problem hiding this comment.
This is not correct. The value could be changed by another caller of the utility. This should be part of the class component only.
| : 0; | ||
| const domainValues = prepareDatapoints( | ||
| finalYmax + maxMarkerSizeInPixelsForYAxis, | ||
| finalYmin - maxMarkerSizeInPixelsForYAxis, |
There was a problem hiding this comment.
define a new function called updateDomainValues
There was a problem hiding this comment.
Where do we define this? maxMarkerSizeInPixelsForYAxis is by default 0 only. The existing logic will remain intact.
There was a problem hiding this comment.
This wouldn't be needed if the marker specific logic moves to the lineChart.base file.
packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
Outdated
Show resolved
Hide resolved
define an additional argument called padding to utility functions. And move the marker size logic to line chart only Refers to: packages/charts/react-charting/src/utilities/utilities.ts:906 in a739a12. [](commit_id = a739a12, deletion_comment = False) |
| }); | ||
| })!; | ||
| const maxMarkerSizeForXAxis = maxMarkerSize | ||
| ? Math.abs((maxMarkerSize * (xMax - xMin)) / (width - margins.right! - margins.left! - 2 * maxMarkerSize)) |
There was a problem hiding this comment.
Looks like the equation is same in both cases:
The only difference is that the sign of
You can extract this equation into a separate function so that if we need to extend the domain of a linear scale:
New Behavior
Created Scatter plot from points in line chart.
Examples generated using BizChat
Related Issue(s)