[Tooltip / Highlight] Radial support #112
Comments
techniq
added a commit
that referenced
this issue
Sep 5, 2024
techniq
added a commit
that referenced
this issue
Sep 5, 2024
|
Just want to say, thanks for building LayerChart. Kudos for your continuous efforts. I am using LayerChart for all chart needs except the radial one as it is currently lacking tooltip & highlight support. Just curious if there is a possibility to have this new PR be part of any interim releases you have planned before the simplified-charts branch is fully merged ? Would love to remove Chart.js dependency at my end (to serve just this need). Neverthless, Great work on the simplified-charts branch / shadcn-svelte integration. Looking forward. |
|
@insidesmart thanks for the kind words. The 2 main outstanding items to merge the new Simplified Charts is to finish radial support, particularly bisect-x/y mode (radial voronoi is done), and work through AreaChart groups. I plan to have at least radial bisect done today, but if I can find enough time, I might be able to have them both done. Then I just need to prepare for the release. My goal is to merge by EoW at the latest, and if not, push a Does that sound good? |
|
Here's some examples of the voronoi support available CleanShot.2024-09-08.at.09.58.18.mp4 |
|
Gr8 to know about the progress and the probable release dates. For now, I have converted the radial chart to bar chart (the rotate property in tickLabelProps was helpful here) and removed Chart.js dependency. Will definitely look into all other possibilities in layerchart in the upcoming weeks. Thanks again. |
|
Curious what kind of radial chart you were using. Could you attached a screenshot? There are a lot of radial use cases I've been thinking about / improving. |
|
I was actually using a Radial Axis chart shown here -> https://www.chartjs.org/docs/latest/axes/radial/#angle-lines |
|
Perfect, thanks. Radar is supported and works best with Regarding additional radial charts, I'll be tracking support here |
|
CleanShot.2024-09-08.at.15.20.39.mp4 |
Merged
techniq
added a commit
that referenced
this issue
Sep 23, 2024
* [Chart] Expose `x`/`y`/`z`/`r` accessors via slot props
* Begin to experiment with new AreaChart component
* Add TooltipHeader component
* [TooltipItem] Support `color` prop to add swatch, support theme colors and any color via `color="variable"`
* Refined Tooltip design WIP
* [AreaChart] Add api, source, and related
* [AreaChart] Require passing x/y accessors and default xScale based on first data's `x` value. Other minor refinements
* Update more usage to use <TooltipHeader> instead of <Tooltip header={d => ...}>
* Consolidate Tooltip components (<TooltipItem>, <TooltipSeparator>, etc) to <Tooltip.Item>, <Tooltip.Separtor>, etc, rename <Tooltip> to <Tooltip.Root>, and other Tooltip-based refinements. Begin updating all examples
* Update more examples to new Tooltip module components
* Refine TooltipHeader default styles
* [TooltipSeparator] Use theme color
* [TooltipHeader] Remove word wrapping (as before)
* Update more examples to new Tooltip module components
* Update remaining examples to new Tooltip module components
* Update remaining <Tooltip header={...}> to <Tooltip.Root><Tooltip.Header>
* Hopefully fix remaining build issues after Tooltip module components
* [AreaChart] Add axis formatting
* Add BarChart
* Add 2 examples for an Area with threshold coloring using RectClipPath or LinearGradient
* [Area] Add over/under threshold examples
* [Area] Add Highlight color based on value example
* [Area] Add "Highlight color based on value using tooltip slot prop" example
* Add @layerstack svelte-stores, tailwind, and utils packages and move `svelte-ux` package to devDependancies (components for docs only)
* Add `@layerstack/svelte-actions` and use `scrollIntoView` action instread of incorrect util (fix build)
* Format
* Move graph example data to static/load to reduce cloudflare worker size
* Remove old graph data file
* Fetch CHANGELOG.md from github via load() to reduce cloudflare worker size
* Reorganize menu and setup chart descriptions
* Fix topojson preview
* Add map pan/zoom to topojson and geosjon previews with enhanced tile layers
* feat(AreaChart): Add `labels` prop and pass `tooltip` as slot prop
* feat(BarChart): Add `tooltip` slot prop
* feat(TooltipItem): Rework `color` prop to be any string color and use CSS variables for theme colors
* feat: Add LineChart component
* Format
* feat(AreaChart): Add `series` support
* Always show tooltip highlight points above areas and simplify by leveraging component value accessor directly
* feat: Add ScatterChart
* docs(Axis): Add responsive ticks example
* Use only layerstack/utils format instead of date-fns for bar examples. Add diverging bar examples
* docs: Add Force Text example
* Make pnpm check happpy
* Pass width, height, and padding to chart slots. Improve ScatterChart custom tooltip example
* fix(Voronoi): Dispatch custom `pointerevent` instead of forwarding to fix console errors
* Add more slots (axis, marks, highlight) for more granular overrides
* Use new granular slots for AreaChart highlight series example
* Add xScale and yScale to slot props
* [AreaChart] Add Gradient and ThresholdGradient examples
* Refine setting thresholdOffset for better readability
* feat(BarChart) Support series (with props) and add `before-marks` and `after-marks` slots. Add examples
* fix(Spline): Enable passing `fill` prop (useful for Bar with single rounded edge)
* feat(AreaChart,LineChart,ScatterChart) Support passing props per series. Add `before-marks` and `after-marks` slots.
* Workaround svelte-check / typescript error
* Add PieChart (WIP)
* feat(Arc): Support passing `tooltip` and `data` props to simplify setting up tooltip pointer events
* Support passing props to inner components
* Change wideData and longData year to number
* Add TODOs
* Simplify
* docs(BarChart): Add horizontal / diverging example (WIP)
* Add vitest
* Format all tooltip values by default (using default formatter based on value)
* fix(BarChart): Change `layout` prop to `orientation` to align with other components
* feat(Points): Add `xValue` and `yValue` to each point, and improve types
* fix(Labels): Handle multiple x or y properties (stack, diverting) by leveraging Points component internally
* Finish horizontal / diverging example and add percent-based version as well
* Fix negative labels/axis on percent version
* Add data source links for population pyramid
* Add stack tests (WIP - fix build by adding test)
* fix(Labels): Restore passing $$restProps to fix check/build, but also remove unneeded override
* docs(ForceText): Add force and trransition toggles
* docs(Chart): Improve description
* docs(Arc): Improve segmented example
* test(accessor): Add tests for accessor function
* Set timezone when running tests to EST
* feat(Chart): Use `accessor()` util before passsing x/y accessors to LayerCake (i.e. support `x="keys[0]"`)
* feat: Rename `createStackData()` to `groupStackData()`, refine returned structure to simplify tooltips and make consistent with different options combinations, and add tests
* docs: Add tooltip examples to Bar/Columns group/stack examples
* fix(accessor): Handle number indexes (ex. stack)
* Use `[...data]` array copying to fix type workaround
* feat(Bar): Forward pointer events to enable individual bar tooltips
* docs(Bars/Columns): Add individual tooltip examples
* fix(groupStackData): Fix `value` when using `groupBy` and `stackBy`
* fix(Rect/Spline): Forward `pointerenter` events
* test(groupStackData): Fix `value` with groupBy only
* docs: Simplify Bar/Columns stacked examples by removing explicit yDomain (can be properly calculated by Chart now)
* docs(Tooltip): Fix area stack tooltip example
* fix(Points):Fix points when using array accessor after using `accessor()` within `Chart` which always sets a function in `config.x` / `y` (instead of using LayerCake's built-in)
* fix(TooltipControls): Fix display of selected options
* feat(Points): Add canvas support
* docs(ForceText): Use new Points canvas support instead of individual svg Circle instances
* Remove console.log
* Rename menu group "Data-driven" to "Marks
* Add a simple Bar docs page
* Provider better AreaChart custom tooltip example
* fix(Area): Pass `x` override to internal Spline
* feat(AreaChart): Add stackSeries support
* Cleanup and fix CI build
* feat(AreaChart): Add total to tooltip when using `stackSeries`
* chore!: Remove `AreaStack` as use cases fully supported by `Area`
* Remove using `accessor()` before passing x/y accessors to LayerCake to allow introspection of values via `config` (otherwise are always functions)
* feat(Area): Simplify usage when `y` accessor set to `[0,1]`
* fix(AreaChart): Reverse series order so tooltip items match stacks
* Add type hack until LayerCake can support `Accessor<TData>` or similar. Fix CI build
* feat(BarChart): Add `stackSeries` support
* fix(Point): Restoring passing `class` to svg circle after supporting canvas
* feat(Chart): Add `radial` prop to enable radial instead of cartesian coordinates at the context level instead of requiring each component to opt-in (Area, Points, Spline).
* feat(Svg): Add `center` to conveniently center children, useful for radial layouts without requiring `Group` wrapper. Remove exta `g` element when no transform is applied
* Rename `axisBottom` / `axisLeft` to `xAxis` / `yAxis` and begin to support radial LineChart
* fix(Chart): Default domain sorting to `false` (instead of LayerCake `true`)
* feat(Voronoi): Support radial coordinates. Issue #112
* feat(Highlight): Support radial coordiantes for `points` and `lines`. Issue #112
* feat(Labels): Support `center` placement (useful with Points)
* fix(Points): Fix passing fill and stroke for Svg (after supporting Canvas)
* feat(LineChart): Support passing `points` prop to easily add Points (similar to `labels`)
* docs(LineChart): Add more examples (Radar, Points with Labels)
* feat(AreaChart): Support radial and better handle y0/y1 with series
* Fix overlooked axisBottom => xAxis
* fix(Highlight): Handle non-zero y values when drawing lines (ex. radial line chart with inner radius)
* fix(Highlight): Handle null value points
* fix(Spline): Handle null data via defined by default
* fix(Area): Handle null data via defined by default
* Rename `before-marks`/`after-marks` to `below-marks`/`above-marks` to be more explicit
* Add pengiun example dataset
* feat(TooltipHeader): Support color swatch
* feat(Chart): Expose `config` as slot prop
* feat(ScatterChart): Support series (with data)
* fix(ChartContext): Subscribe to chart config before passing to slot prop
* docs(ScatterChart): Set custom tooltip example chart height to match other examples
* fix(Points): Remove incorrect points for null/undefined values
* feat(AreaChart): Support series data and points prop
* feat(AreaChart): Allow series.key as fallback for label and value, and simplify examples
* feat(LineChart): Support series.data and s.key. Cleanup/refine docs
* docs(LineChart): Radar with series data
* fix(cartesianToPolar): Correctly calculate angle/radians between 0 and 2π
* feat(tooltip): Update bisect-x mode to support radial coordinates
* Use `scaleTime()` (default) instead of `scaleUtc()` to fix axis formatting and simplify examples
* feat(BarChart): Support series.data and s.key. Cleanup/refine docs
* docs(LineChart): Add more examples
* docs(LineChart): Improve gradient encoding tooltip/highlight
* refactor(Chart): No longer expose layout components (Svg, Canvas) from Chart module export
* docs(BarChart): Increase height of horizontal series example
* refactor: Use `xBaseline` / `yBaseline` instead of `xDomain` to `yDomain` to include `0` by default. Simplifies negative data use cases
* docs(LineChart): Improve radial large series axis
* fix(Highlight): Handle null value for lines
* breaking(Threshold): Simplify implementation and rename `pathAbove`/`pathBelow` slots to `above`/`below`
* fix(Points): Fix array values
* docs(PieChart): Tweak arc example
* feat(PieChart): Add Group to enable shifting all arcs (useful for arc / partial circle). Refine arc example
* docs(TranslucentGlobe): Update Tooltip
* feat(Chart): Support x1/y1 derived scales, useful for grouped bar charts, and replace Bar/Bars groupBy/etc with these new scales
* feat(BarChart): Support "group" series layout (and replace `seriesStack` with `seriesLayout="stack"`)
* Improve changesets
* feat(Chart): Expose x1Scale and y1Scale as slot props
* feat(ChartContext): Default x1Domain / y1Domain to extent of chart data base on x1/y1 accessor (similar to other scales)
* docs: Simplify dual axis example with remapping scale by using y1Scale
* breaking: Add new color `cScale` (and related `c` accessor, domain, range, etc) and replace `rScale` usage (which should be used for radius, etc)
* fix(ChartContext): Use distinct values for color domain
* Remove unused import
* feat(PieChart): Add `series` support (and remove `separateTracks`)
* refactor(PieChart): Simplify single value use case and always guarantee an array of data
* refactor(Chart): Handle radial default xRange/yRange within Chart instead of in each chart (AreaChart/LineChart)
* Add another workaround for LayerCake typings to fix `svelte-check`
* breaking(Pie): Remove `placement` prop and instead rely Svg `center` or use `Group` for positioning
* fix(PieChart): Support passing explicit (>0) outerRadius for single arc variant.
* docs(Pie): Fix accidental search/replace
* docs(AreaChart): Use thresholdValue for Area y0 for better readability
* feat(Points): Integrate with rScale. Add support with ScatterChart
* docs(PieChart): Add "Single value gradient with text" example
* feat: Support easy disabling axis on simplified charts, and add sparline examples
* feat(Bars): Support passing `data` override
* feat(BarChart): Support passing series (long) data
* Add changeset for new simplified charts (AreaChart, BarChart, LineChart, PieChart, and ScatterChart)
* Tweak changeset
* fix(Svg): Fix center reactivity with width/height changes
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
With the recent addition of radial line/area charts, it would be great to support tooltips
Examples
The text was updated successfully, but these errors were encountered: