feat(react-charting): Support marker shapes for scatter chart #34656
Conversation
srmukher
changed the title
📊 Bundle size report✅ No changes found |
packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx
Outdated
Show resolved
Hide resolved
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
change/@fluentui-react-charting-27a887a9-dd1e-400c-b696-da3e3c231c33.json
Show resolved
Hide resolved
...ages/charts/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
Outdated
Show resolved
Hide resolved
packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx
Outdated
Show resolved
Hide resolved
packages/charts/react-charting/src/components/Legends/shape.tsx
Outdated
Show resolved
Hide resolved
| height={14} | ||
| viewBox={'-1 -1 14 14'} | ||
| {...getSecureProps(svgProps)} | ||
| transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`} |
There was a problem hiding this comment.
no, since we have the exact shapes this transform was changing the legend shape
| return '-1 -1 14 14'; | ||
| } | ||
| // For plotly-based shapes, use centered viewBox | ||
| return '-7 -7 14 14'; |
There was a problem hiding this comment.
because the plotly shape paths are centrally aligned and thus the view box had to be changed. otherwise the legend container was showing incomplete shapes.
packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json
Outdated
Show resolved
Hide resolved
|
Legend shapes have a special behavior of showing only the border on deselection and filling the entire shape on selection. Do your new shapes have this functionality. |
srmukher
force-pushed
the
users/srmukher/scatter_marker_shapes
branch
from
af6119e to
81a8169
Compare
yes |
srmukher
force-pushed
the
users/srmukher/scatter_marker_shapes
branch
from
c588762 to
55d24dc
Compare
|
what is the size bump for this PR |
srmukher
force-pushed
the
users/srmukher/scatter_marker_shapes
branch
from
3760311 to
6016492
Compare
< 1 kB
|
|
Pull request demo site: URL |
| @@ -950,7 +959,7 @@ export interface ILegend { | |||
| nativeButtonProps?: React_2.ButtonHTMLAttributes<HTMLButtonElement>; | |||
| onMouseOutAction?: (isLegendFocused?: boolean) => void; | |||
| opacity?: number; | |||
| shape?: LegendShape; | |||
| shape?: DataPointShape; | |||
| '2.26l-2.26,2.26l2.26,2.26Z', | ||
| // Additional shapes | ||
| star: 'M1.26,-1.73H5.33L2.03,0.66L3.29,4.53L0,2.14L-3.29,4.53L-2.03,0.66L-5.33,-1.73H-1.26L0,-5.6Z', | ||
| hexagram: |
There was a problem hiding this comment.
are all shapes now starting from viewpoint 0,0 to 14,14
There was a problem hiding this comment.
no its '-7 -7 14 14'; means the SVG's coordinate system goes from -7 to +7 on both axes, with (0,0) at the center. The previous shapes were not centrally aligned thats why on hover, the line indicating the position was also distorted, starting from left. Now all shapes are centrally aligned.
Shapes Before:
Shapes now:
…ers/srmukher/scatter_marker_shapes
In Fluent chart:
In Plotly:
