From a47aba232014d225e48fe108c57f42c66783058b Mon Sep 17 00:00:00 2001 From: Scott Rhamy Date: Sun, 28 Dec 2025 17:11:13 -0500 Subject: [PATCH 1/5] update components to use :example - to :{example} - fix a few accumulated showCodes, they were in commented out code, but fixed nontheless. - updated markdown examples to show code for how to use newly added functionality. --- docs/src/content/components/AnnotationLine.md | 6 +- .../src/content/components/AnnotationPoint.md | 6 +- .../src/content/components/AnnotationRange.md | 6 +- docs/src/content/components/Arc.md | 13 +- docs/src/content/components/ArcChart.md | 49 +++---- docs/src/content/components/Area.md | 12 +- docs/src/content/components/AreaChart.md | 88 ++++++------ docs/src/content/components/Axis.md | 84 ++++++----- docs/src/content/components/Bar.md | 6 +- docs/src/content/components/BarChart.md | 133 +++++++++--------- docs/src/content/components/Bars.md | 6 +- docs/src/content/components/Blur.md | 4 +- docs/src/content/components/Bounds.md | 4 +- docs/src/content/components/BrushContext.md | 36 +++-- docs/src/content/components/Calendar.md | 20 ++- docs/src/content/components/Canvas.md | 4 - docs/src/content/components/Chart.md | 10 +- docs/src/content/components/ChartClipPath.md | 3 - docs/src/content/components/Circle.md | 12 +- docs/src/content/components/CircleClipPath.md | 4 +- docs/src/content/components/ClipPath.md | 3 - docs/src/content/components/ColorRamp.md | 10 +- docs/src/content/components/Connector.md | 5 +- docs/src/content/components/Dagre.md | 6 +- docs/src/content/components/Ellipse.md | 12 +- .../src/content/components/ForceSimulation.md | 6 +- docs/src/content/components/Frame.md | 14 +- docs/src/content/components/GeoCircle.md | 6 +- docs/src/content/components/GeoContext.md | 6 +- docs/src/content/components/GeoEdgeFade.md | 4 +- docs/src/content/components/GeoPath.md | 6 +- docs/src/content/components/GeoPoint.md | 6 +- docs/src/content/components/GeoSpline.md | 6 +- docs/src/content/components/GeoTile.md | 6 +- docs/src/content/components/GeoVisible.md | 4 +- docs/src/content/components/Graticule.md | 6 +- docs/src/content/components/Grid.md | 34 ++--- docs/src/content/components/Group.md | 6 +- docs/src/content/components/Highlight.md | 4 +- docs/src/content/components/Html.md | 4 - docs/src/content/components/Hull.md | 8 +- docs/src/content/components/Labels.md | 16 +-- docs/src/content/components/Layer.md | 4 - docs/src/content/components/Legend.md | 44 +++--- docs/src/content/components/Line.md | 6 +- docs/src/content/components/LineChart.md | 92 ++++++------ docs/src/content/components/LinearGradient.md | 12 +- docs/src/content/components/Link.md | 6 +- docs/src/content/components/Marker.md | 16 +-- docs/src/content/components/MotionPath.md | 10 +- docs/src/content/components/Pack.md | 6 +- docs/src/content/components/Partition.md | 6 +- docs/src/content/components/Path.md | 6 +- docs/src/content/components/Pattern.md | 18 +-- docs/src/content/components/Pie.md | 58 ++++---- docs/src/content/components/PieChart.md | 62 ++++---- docs/src/content/components/Point.md | 6 +- docs/src/content/components/Points.md | 10 +- docs/src/content/components/Polygon.md | 48 +++---- docs/src/content/components/RadialGradient.md | 12 +- docs/src/content/components/Rect.md | 12 +- docs/src/content/components/RectClipPath.md | 4 +- docs/src/content/components/Rule.md | 34 ++--- docs/src/content/components/Sankey.md | 6 +- docs/src/content/components/ScatterChart.md | 52 ++++--- docs/src/content/components/Spline.md | 28 ++-- docs/src/content/components/Svg.md | 4 - docs/src/content/components/Text.md | 10 +- docs/src/content/components/Threshold.md | 6 +- docs/src/content/components/TileImage.md | 4 +- docs/src/content/components/Tooltip.md | 44 +++--- docs/src/content/components/TooltipContext.md | 4 +- .../content/components/TransformContext.md | 10 +- docs/src/content/components/Tree.md | 6 +- docs/src/content/components/Treemap.md | 4 +- docs/src/content/components/Voronoi.md | 6 +- docs/src/routes/docs/markdown/+page.md | 100 ++++++++++++- 77 files changed, 636 insertions(+), 804 deletions(-) diff --git a/docs/src/content/components/AnnotationLine.md b/docs/src/content/components/AnnotationLine.md index bc699808e..b8a05a2c6 100644 --- a/docs/src/content/components/AnnotationLine.md +++ b/docs/src/content/components/AnnotationLine.md @@ -5,10 +5,6 @@ layers: [svg, canvas, html] related: [AnnotationPoint, AnnotationRange] --- - - ## Usage - +:example{ name="horizontal" showCode } \ No newline at end of file diff --git a/docs/src/content/components/AnnotationPoint.md b/docs/src/content/components/AnnotationPoint.md index 9fd0f9b44..06bc6daf6 100644 --- a/docs/src/content/components/AnnotationPoint.md +++ b/docs/src/content/components/AnnotationPoint.md @@ -5,10 +5,6 @@ layers: [svg, canvas, html] related: [AnnotationLine, AnnotationRange] --- - - ## Usage - +:example{ name="line-to-point" showCode } \ No newline at end of file diff --git a/docs/src/content/components/AnnotationRange.md b/docs/src/content/components/AnnotationRange.md index 2181caf46..075e5e0a2 100644 --- a/docs/src/content/components/AnnotationRange.md +++ b/docs/src/content/components/AnnotationRange.md @@ -5,10 +5,6 @@ layers: [svg, canvas, html] related: [AnnotationLine, AnnotationPoint] --- - - ## Usage - +:example{ name="vertical-with-pattern-range" showCode } \ No newline at end of file diff --git a/docs/src/content/components/Arc.md b/docs/src/content/components/Arc.md index c5df3bb4d..de6f6d1b5 100644 --- a/docs/src/content/components/Arc.md +++ b/docs/src/content/components/Arc.md @@ -5,15 +5,11 @@ layers: [svg, canvas] related: [Pie, ArcChart, PieChart] --- - - -> See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples +:tip See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples ## Usage - +:example{ name="partial-arc" showCode } ## Text along path @@ -21,8 +17,9 @@ related: [Pie, ArcChart, PieChart] The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc - +:example{ name="label-direction" } ## Playground - +:example{ name="playground" } + diff --git a/docs/src/content/components/ArcChart.md b/docs/src/content/components/ArcChart.md index 64aba9df2..5e4416502 100644 --- a/docs/src/content/components/ArcChart.md +++ b/docs/src/content/components/ArcChart.md @@ -5,82 +5,83 @@ layers: [svg, canvas] related: [Chart, Pie] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="series-motion-spring" } --> diff --git a/docs/src/content/components/Area.md b/docs/src/content/components/Area.md index f64220698..88b0a4319 100644 --- a/docs/src/content/components/Area.md +++ b/docs/src/content/components/Area.md @@ -5,16 +5,14 @@ layers: [svg, canvas] related: [] --- - - -> See also: [AreaChart](/docs/components/AreaChart) for simplified examples +::info +See also: [AreaChart](/docs/components/AreaChart) for simplified examples +:: ## Usage - +:example{ name="basic" showCode } ## Playground - +:example{ name="playground" } \ No newline at end of file diff --git a/docs/src/content/components/AreaChart.md b/docs/src/content/components/AreaChart.md index aa6476e05..44677d8c6 100644 --- a/docs/src/content/components/AreaChart.md +++ b/docs/src/content/components/AreaChart.md @@ -5,176 +5,172 @@ layers: [svg, canvas] related: [Chart, Area] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="custom" } --> \ No newline at end of file diff --git a/docs/src/content/components/Axis.md b/docs/src/content/components/Axis.md index 3c61379b4..9b9f0525c 100644 --- a/docs/src/content/components/Axis.md +++ b/docs/src/content/components/Axis.md @@ -5,163 +5,159 @@ layers: [svg, canvas, html] related: [Grid, Rule] --- - - ## Usage - +:example{ name="placement-bottom-left" showCode } +:example{ name="time-scale-brush-multiline" } --> \ No newline at end of file diff --git a/docs/src/content/components/Bar.md b/docs/src/content/components/Bar.md index 55b3e1a43..13db194d1 100644 --- a/docs/src/content/components/Bar.md +++ b/docs/src/content/components/Bar.md @@ -5,12 +5,8 @@ layers: [svg, canvas] related: [Bars] --- - - ## Usage - +:example{ component="Bars" name="vertical-customize-individual-styles" showCode } Typically the component is rendering within the `Bars` mark but can be rendered explicitly when you need more control on a per-mark basis diff --git a/docs/src/content/components/BarChart.md b/docs/src/content/components/BarChart.md index f1d567de2..8810bb6bc 100644 --- a/docs/src/content/components/BarChart.md +++ b/docs/src/content/components/BarChart.md @@ -5,264 +5,261 @@ layers: [svg, canvas] related: [Chart, Bars] --- - - ## Usage - +:example{ name="vertical-default" showCode } +:example{ name="custom-chart" } --> diff --git a/docs/src/content/components/Bars.md b/docs/src/content/components/Bars.md index 194de15a2..bad38792e 100644 --- a/docs/src/content/components/Bars.md +++ b/docs/src/content/components/Bars.md @@ -5,12 +5,8 @@ layers: [svg, canvas] related: [Bar] --- - - > See also: [BarChart](/docs/components/BarChart) for simplified examples ## Usage - +:example{ name="vertical-basic" showCode } diff --git a/docs/src/content/components/Blur.md b/docs/src/content/components/Blur.md index e40ec4e9e..993db12c0 100644 --- a/docs/src/content/components/Blur.md +++ b/docs/src/content/components/Blur.md @@ -5,6 +5,4 @@ layers: [svg] related: [] --- - + diff --git a/docs/src/content/components/Bounds.md b/docs/src/content/components/Bounds.md index 041ce7225..3faf2deef 100644 --- a/docs/src/content/components/Bounds.md +++ b/docs/src/content/components/Bounds.md @@ -5,6 +5,4 @@ layers: [svg, canvas] related: [] --- - + diff --git a/docs/src/content/components/BrushContext.md b/docs/src/content/components/BrushContext.md index e751e4f87..b33e4908e 100644 --- a/docs/src/content/components/BrushContext.md +++ b/docs/src/content/components/BrushContext.md @@ -5,72 +5,68 @@ layers: [svg, canvas] related: [] --- - - ## Examples ### Basic - +:example{name="basic"} ### Simple styling - +:example{name="simple-styling"} ### Striped background - +:example{name="striped-background"} ### Handle arrows - +:example{name="handle-arrows"} ### Handle labels - +:example{name="handle-labels"} ### Constant labels - +:example{name="constant-labels"} ### Integrated brush (x-axis) - +:example{name="integrated-brush-(x-axis)"} ### Integrated brush (y-axis) - +:example{name="integrated-brush-(y-axis)"} ### Integrated brush (both axis / area) - +:example{name="integrated-brush-(both-axis-area)"} ### Separate chart (clip data) - +:example{name="separate-chart-(clip-data)"} ### Separate chart (clip data: y-axis) - +:example{name="separate-chart-(clip-data-y-axis)"} ### Separate chart (filter data) - +:example{name="separate-chart-(filter-data)"} ### Sync brushes with `bind:xDomain` - +:example{name="sync-brushes-with-bind-xdomain"} ### Tooltip interop - +:example{name="tooltip-interop"} ### Selection - +:example{name="selection"} ### Minimap - +:example{name="minimap"} diff --git a/docs/src/content/components/Calendar.md b/docs/src/content/components/Calendar.md index 132ca1419..b4a845f96 100644 --- a/docs/src/content/components/Calendar.md +++ b/docs/src/content/components/Calendar.md @@ -5,40 +5,36 @@ layers: [svg, canvas, html] related: [] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="90-days" showCode } --> diff --git a/docs/src/content/components/Canvas.md b/docs/src/content/components/Canvas.md index 8febbce28..d5270dd22 100644 --- a/docs/src/content/components/Canvas.md +++ b/docs/src/content/components/Canvas.md @@ -5,8 +5,4 @@ layers: [] related: [Layer] --- - - Typically you will use `` diff --git a/docs/src/content/components/Chart.md b/docs/src/content/components/Chart.md index 3e96e4d23..931313c61 100644 --- a/docs/src/content/components/Chart.md +++ b/docs/src/content/components/Chart.md @@ -7,12 +7,10 @@ related: order: 1 --- - - ## Usage - +:example{ component="Area" name="basic" showCode } -> Features: Adds support for x and y baselines (always show 0, etc) +::note +Features: Adds support for x and y baselines (always show 0, etc) +:: diff --git a/docs/src/content/components/ChartClipPath.md b/docs/src/content/components/ChartClipPath.md index 9b2451443..d97c8a5ab 100644 --- a/docs/src/content/components/ChartClipPath.md +++ b/docs/src/content/components/ChartClipPath.md @@ -5,6 +5,3 @@ layers: [svg] related: [RectClipPath, Rect] --- - diff --git a/docs/src/content/components/Circle.md b/docs/src/content/components/Circle.md index 012e3197c..721e204f5 100644 --- a/docs/src/content/components/Circle.md +++ b/docs/src/content/components/Circle.md @@ -5,24 +5,20 @@ layers: [svg, canvas, html] related: [Points] --- - - ## Usage - +:example{ name="styling-using-classes" showCode } +:example{ name="styling-using-css-variables" } --> diff --git a/docs/src/content/components/CircleClipPath.md b/docs/src/content/components/CircleClipPath.md index 5c08c108b..46c4fc436 100644 --- a/docs/src/content/components/CircleClipPath.md +++ b/docs/src/content/components/CircleClipPath.md @@ -5,6 +5,4 @@ layers: [svg] related: [] --- - + diff --git a/docs/src/content/components/ClipPath.md b/docs/src/content/components/ClipPath.md index 56b20824f..0766e6548 100644 --- a/docs/src/content/components/ClipPath.md +++ b/docs/src/content/components/ClipPath.md @@ -12,6 +12,3 @@ related: order: 1 --- - diff --git a/docs/src/content/components/ColorRamp.md b/docs/src/content/components/ColorRamp.md index 4fc17a517..622061c22 100644 --- a/docs/src/content/components/ColorRamp.md +++ b/docs/src/content/components/ColorRamp.md @@ -5,20 +5,16 @@ layers: [svg] related: [] --- - - ## Examples ### Basic - +:example{name="basic" noResize } ### Pixelated - +:example{name="pixelated" noResize } ### Schemes - +:example{name="schemes" noResize } diff --git a/docs/src/content/components/Connector.md b/docs/src/content/components/Connector.md index 6eee58619..bfca0471d 100644 --- a/docs/src/content/components/Connector.md +++ b/docs/src/content/components/Connector.md @@ -5,10 +5,7 @@ layers: [svg, canvas] related: [Link] --- - ## Usage - +:example{name="playground" showCode } diff --git a/docs/src/content/components/Dagre.md b/docs/src/content/components/Dagre.md index c0b3a635d..85498d4f3 100644 --- a/docs/src/content/components/Dagre.md +++ b/docs/src/content/components/Dagre.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{name="basic"} diff --git a/docs/src/content/components/Ellipse.md b/docs/src/content/components/Ellipse.md index dd73e2632..7734e377d 100644 --- a/docs/src/content/components/Ellipse.md +++ b/docs/src/content/components/Ellipse.md @@ -5,24 +5,20 @@ layers: [svg, canvas, html] related: [] --- - - ## Usage - +:example{ name="styling-using-classes" showCode } +:example{ name="styling-using-css-variables" } --> diff --git a/docs/src/content/components/ForceSimulation.md b/docs/src/content/components/ForceSimulation.md index 490c5c88a..0a38df542 100644 --- a/docs/src/content/components/ForceSimulation.md +++ b/docs/src/content/components/ForceSimulation.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{name="tree"} diff --git a/docs/src/content/components/Frame.md b/docs/src/content/components/Frame.md index f5f315ce0..e62873cdb 100644 --- a/docs/src/content/components/Frame.md +++ b/docs/src/content/components/Frame.md @@ -5,13 +5,9 @@ layers: [svg, canvas, html] related: [Rect] --- - - ## Usage - +:example{name="basic" showCode } +:example{ name="gradient" } --> diff --git a/docs/src/content/components/GeoCircle.md b/docs/src/content/components/GeoCircle.md index d95fbe941..7cfcaf247 100644 --- a/docs/src/content/components/GeoCircle.md +++ b/docs/src/content/components/GeoCircle.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Playground - +:example{ name="playground" } diff --git a/docs/src/content/components/GeoContext.md b/docs/src/content/components/GeoContext.md index ec050d3ba..b67b0b62d 100644 --- a/docs/src/content/components/GeoContext.md +++ b/docs/src/content/components/GeoContext.md @@ -6,10 +6,6 @@ related: [Chart] order: 1 --- - - ## Playground - +:example{ name="projection-playground" } diff --git a/docs/src/content/components/GeoEdgeFade.md b/docs/src/content/components/GeoEdgeFade.md index 4d71474b0..99018defd 100644 --- a/docs/src/content/components/GeoEdgeFade.md +++ b/docs/src/content/components/GeoEdgeFade.md @@ -5,6 +5,4 @@ layers: [svg, canvas] related: [] --- - + diff --git a/docs/src/content/components/GeoPath.md b/docs/src/content/components/GeoPath.md index a897332f2..912726c92 100644 --- a/docs/src/content/components/GeoPath.md +++ b/docs/src/content/components/GeoPath.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [Graticule] --- - - ## Usage - +:example{ name="tooltip" showCode } diff --git a/docs/src/content/components/GeoPoint.md b/docs/src/content/components/GeoPoint.md index 0d89a3080..0ccb4fbb4 100644 --- a/docs/src/content/components/GeoPoint.md +++ b/docs/src/content/components/GeoPoint.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="us-state-capitals" showCode } diff --git a/docs/src/content/components/GeoSpline.md b/docs/src/content/components/GeoSpline.md index 26ad756e9..f46df3a9c 100644 --- a/docs/src/content/components/GeoSpline.md +++ b/docs/src/content/components/GeoSpline.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="world-map" showCode } diff --git a/docs/src/content/components/GeoTile.md b/docs/src/content/components/GeoTile.md index 7c4810948..c2d78f006 100644 --- a/docs/src/content/components/GeoTile.md +++ b/docs/src/content/components/GeoTile.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="basic" showCode } diff --git a/docs/src/content/components/GeoVisible.md b/docs/src/content/components/GeoVisible.md index 22f7450f1..bdbd1499d 100644 --- a/docs/src/content/components/GeoVisible.md +++ b/docs/src/content/components/GeoVisible.md @@ -5,6 +5,4 @@ layers: [svg, canvas] related: [] --- - + diff --git a/docs/src/content/components/Graticule.md b/docs/src/content/components/Graticule.md index fb7e0a19d..7d7c610f4 100644 --- a/docs/src/content/components/Graticule.md +++ b/docs/src/content/components/Graticule.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="basic" showCode } diff --git a/docs/src/content/components/Grid.md b/docs/src/content/components/Grid.md index f9e4b9bca..a504f9e3c 100644 --- a/docs/src/content/components/Grid.md +++ b/docs/src/content/components/Grid.md @@ -5,70 +5,66 @@ layers: [svg, canvas, html] related: [Axis, Rule] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="tick-count-null" } --> diff --git a/docs/src/content/components/Group.md b/docs/src/content/components/Group.md index 6e20ed725..51afeae2c 100644 --- a/docs/src/content/components/Group.md +++ b/docs/src/content/components/Group.md @@ -5,10 +5,6 @@ layers: [svg, html] related: [] --- - - ## Usage - +:example{ name="basic" showCode } diff --git a/docs/src/content/components/Highlight.md b/docs/src/content/components/Highlight.md index bae857f97..80d2240a0 100644 --- a/docs/src/content/components/Highlight.md +++ b/docs/src/content/components/Highlight.md @@ -5,6 +5,4 @@ layers: [svg, canvas] related: [Tooltip, TooltipContext] --- - + diff --git a/docs/src/content/components/Html.md b/docs/src/content/components/Html.md index ff4e9cd29..c1345b7ac 100644 --- a/docs/src/content/components/Html.md +++ b/docs/src/content/components/Html.md @@ -5,8 +5,4 @@ layers: [] related: [Layer] --- - - Typically you will use `` diff --git a/docs/src/content/components/Hull.md b/docs/src/content/components/Hull.md index 2729d85f9..ab4d2e443 100644 --- a/docs/src/content/components/Hull.md +++ b/docs/src/content/components/Hull.md @@ -5,16 +5,12 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="scatter" showCode } ## Geo context Hull can also be used within a geo context (i.e. ``) - +:example{ name="geo" } diff --git a/docs/src/content/components/Labels.md b/docs/src/content/components/Labels.md index 5daf6662a..93d502820 100644 --- a/docs/src/content/components/Labels.md +++ b/docs/src/content/components/Labels.md @@ -5,34 +5,30 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ component="Bars" name="vertical-outside-labels-default" showCode } ## Bar charts By default labels will be on the outside of bars, above for positive values and below for negative values - +:example{ component="Bars" name="vertical-outside-labels-default" showCode } You can also use `placement="inside"` to place within the bars (near the value) - +:example{ component="Bars" name="vertical-inside-labels" } ## Line charts - +:example{ component="Spline" name="with-labels" } ## Scatter charts - +:example{ component="Points" name="with-labels" } ## Simplified charts Labels are also integrated in simplified charts via the `labels` prop - +:example{ component="BarChart" name="labels" } diff --git a/docs/src/content/components/Layer.md b/docs/src/content/components/Layer.md index 0b038d3c2..345ee94a2 100644 --- a/docs/src/content/components/Layer.md +++ b/docs/src/content/components/Layer.md @@ -5,10 +5,6 @@ layers: [svg, canvas, html] related: [Canvas, Html, Svg] --- - - ## Usage > TODO: Show all 3 Layer types being used together diff --git a/docs/src/content/components/Legend.md b/docs/src/content/components/Legend.md index 9707a9428..d104b1b1b 100644 --- a/docs/src/content/components/Legend.md +++ b/docs/src/content/components/Legend.md @@ -5,88 +5,84 @@ layers: [html] related: [] --- - - ## Usage - +:example{ name="sequential" showCode } +:example{ name="children-override" } --> diff --git a/docs/src/content/components/Line.md b/docs/src/content/components/Line.md index 98d4575d7..d549260d7 100644 --- a/docs/src/content/components/Line.md +++ b/docs/src/content/components/Line.md @@ -5,10 +5,6 @@ layers: [svg, canvas, html] related: [Rule, Spline] --- - - ## Usage - +:example{ name="styling-using-classes" showCode } diff --git a/docs/src/content/components/LineChart.md b/docs/src/content/components/LineChart.md index 692dfda7b..934ff7d63 100644 --- a/docs/src/content/components/LineChart.md +++ b/docs/src/content/components/LineChart.md @@ -5,190 +5,186 @@ layers: [svg, canvas] related: [Chart, Spline] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="custom" } --> diff --git a/docs/src/content/components/LinearGradient.md b/docs/src/content/components/LinearGradient.md index 7340bd37c..00c33748c 100644 --- a/docs/src/content/components/LinearGradient.md +++ b/docs/src/content/components/LinearGradient.md @@ -5,22 +5,18 @@ layers: [svg, canvas, html] related: [RadialGradient, Pattern] --- - - ## Direction with custom colors - +:example{ name="direction-with-custom-colors" noResize} ## Explicit offsets - +:example{ name="explicit-offsets" noResize} ## Tailwind colors - +:example{ name="tailwind-colors" noResize clip} ## Units - +:example{ name="units" noResize clip} diff --git a/docs/src/content/components/Link.md b/docs/src/content/components/Link.md index eb1951b35..5374d3495 100644 --- a/docs/src/content/components/Link.md +++ b/docs/src/content/components/Link.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [Connector, Points] --- - - ## Usage - +:example{ component="Tree" name="basic" } diff --git a/docs/src/content/components/Marker.md b/docs/src/content/components/Marker.md index e4c6ec7ee..304d9749d 100644 --- a/docs/src/content/components/Marker.md +++ b/docs/src/content/components/Marker.md @@ -5,32 +5,28 @@ layers: [svg] related: [Spline, Line, Rule, GeoSpline] --- - - ## Usage - +:example{ name="spline" showCode } +:example{ name="orientation" } --> diff --git a/docs/src/content/components/MotionPath.md b/docs/src/content/components/MotionPath.md index 0e709f356..917ce345d 100644 --- a/docs/src/content/components/MotionPath.md +++ b/docs/src/content/components/MotionPath.md @@ -5,22 +5,18 @@ layers: [svg] related: [Spline] --- - - ## Examples ### Repeat indefinitely - +:example{ name="repeat-indefinitely"} ### Rotate object with path - +:example{ name="rotate-object-with-path"} ### Sync with draw - +:example{ name="sync-with-draw"} > Because the draw transition and `animateMotion` using different timers, there is no guarantee they will start at the same time diff --git a/docs/src/content/components/Pack.md b/docs/src/content/components/Pack.md index 71cb4c50c..97d8e9ff4 100644 --- a/docs/src/content/components/Pack.md +++ b/docs/src/content/components/Pack.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="basic"} diff --git a/docs/src/content/components/Partition.md b/docs/src/content/components/Partition.md index 9de6a8b07..38d843cf1 100644 --- a/docs/src/content/components/Partition.md +++ b/docs/src/content/components/Partition.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="horizontal"} diff --git a/docs/src/content/components/Path.md b/docs/src/content/components/Path.md index 29d017cc7..500dff941 100644 --- a/docs/src/content/components/Path.md +++ b/docs/src/content/components/Path.md @@ -5,12 +5,8 @@ layers: [svg, canvas] related: [Arc, Area, Bar, Connector, GeoPath, MotionPath, Spline] --- - - ## Usage - + > TODO diff --git a/docs/src/content/components/Pattern.md b/docs/src/content/components/Pattern.md index b1250b8c8..dfb8c68e6 100644 --- a/docs/src/content/components/Pattern.md +++ b/docs/src/content/components/Pattern.md @@ -5,34 +5,30 @@ layers: [svg, canvas] related: [LinearGradient, RadialGradient] --- - - ## Lines - +:example{ name="lines" noResize clip} ## Circles - +:example{ name="circles" noResize clip} ## With Fill color - +:example{ name="with-fill-color" noResize clip} ## With LinearGradient - +:example{ name="with-lineargradient" noResize clip} ## LinearGradient as Pattern - +:example{ name="lineargradient-as-pattern" noResize clip} ## Lines (custom pattern - svg only) - +:example{ name="lines-custom-pattern-svg-only" noResize clip} ## Circles (custom pattern - svg only) - +:example{ name="circles-custom-pattern-svg-only" noResize clip} diff --git a/docs/src/content/components/Pie.md b/docs/src/content/components/Pie.md index 9420b0336..f853cbcdf 100644 --- a/docs/src/content/components/Pie.md +++ b/docs/src/content/components/Pie.md @@ -5,116 +5,114 @@ layers: [svg, canvas] related: [Arc, PieChart] --- - - -> See also: [PieChart](/docs/components/PieChart) for simplified examples +::tip +See also: [PieChart](/docs/components/PieChart) for simplified examples +:: ### Usage - +:example{ name="basic" showCode } +:example{ name="placement-right" } --> diff --git a/docs/src/content/components/PieChart.md b/docs/src/content/components/PieChart.md index 55387ae0d..487c37b30 100644 --- a/docs/src/content/components/PieChart.md +++ b/docs/src/content/components/PieChart.md @@ -5,130 +5,126 @@ layers: [svg, canvas] related: [Chart, Pie] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="motion-spring" } --> diff --git a/docs/src/content/components/Point.md b/docs/src/content/components/Point.md index f385f6db9..46af92071 100644 --- a/docs/src/content/components/Point.md +++ b/docs/src/content/components/Point.md @@ -5,10 +5,6 @@ layers: [svg, canvas, html] related: [] --- - - ## Usage - +:example{name="basic"} diff --git a/docs/src/content/components/Points.md b/docs/src/content/components/Points.md index acb729b01..2c877863e 100644 --- a/docs/src/content/components/Points.md +++ b/docs/src/content/components/Points.md @@ -5,12 +5,10 @@ layers: [svg, canvas] related: [ScatterChart] --- - - -> See also: [ScatterChart](/docs/components/ScatterChart) for simplified examples +::tip +See also: [ScatterChart](/docs/components/ScatterChart) for simplified examples +:: ## Usage - +:example{ name="basic" showCode } diff --git a/docs/src/content/components/Polygon.md b/docs/src/content/components/Polygon.md index cd601222d..8b091a96d 100644 --- a/docs/src/content/components/Polygon.md +++ b/docs/src/content/components/Polygon.md @@ -5,100 +5,96 @@ layers: [svg, canvas] related: [] --- - - ### Usage - +:example{ name="playground" showCode } +:example{ name="cross" } --> diff --git a/docs/src/content/components/RadialGradient.md b/docs/src/content/components/RadialGradient.md index ec02e6905..88851c0dd 100644 --- a/docs/src/content/components/RadialGradient.md +++ b/docs/src/content/components/RadialGradient.md @@ -5,22 +5,18 @@ layers: [svg] related: [LinearGradient, Pattern] --- - - ## Focal location and radius with custom colors - +:example{ name="focal-location-and-radius-with-custom-colors" noResize clip } ## Tailwind colors - +:example{ name="tailwind-colors" noResize clip } ## spreadMethod - +:example{ name="spreadmethod" noResize clip } ## units - +:example{ name="units" noResize clip } diff --git a/docs/src/content/components/Rect.md b/docs/src/content/components/Rect.md index a2a49a549..1a5fd2af6 100644 --- a/docs/src/content/components/Rect.md +++ b/docs/src/content/components/Rect.md @@ -5,24 +5,20 @@ layers: [svg, canvas, html] related: [Bars, Highlight, RectClipPath] --- - - ### Usage - +:example{ name="styling-using-classes" showCode } +:example{ name="styling-using-css-variables" } --> diff --git a/docs/src/content/components/RectClipPath.md b/docs/src/content/components/RectClipPath.md index 07913b628..57042db8f 100644 --- a/docs/src/content/components/RectClipPath.md +++ b/docs/src/content/components/RectClipPath.md @@ -5,6 +5,4 @@ layers: [svg] related: [ChartClipPath] --- - + diff --git a/docs/src/content/components/Rule.md b/docs/src/content/components/Rule.md index e8e74857c..17af8d120 100644 --- a/docs/src/content/components/Rule.md +++ b/docs/src/content/components/Rule.md @@ -5,13 +5,9 @@ layers: [svg, canvas, html] related: [Axis, Line, AnnotationLine] --- - - ## Usage - +:example{ name="baseline-x-y" showCode } ## Use cases @@ -21,13 +17,13 @@ A `Rule` component can be used for various use cases include: with `x={true}` / `y={true}` - +:example{ name="baseline-x-y" showCode } ### Annotation with `x={Number}` / `y={Number}` - +:example{ name="annotation-y" showCode } ### Data mark @@ -35,50 +31,50 @@ using `` and either: - implicit `x` / `y` (using ``) - +:example{ name="data-x-range" showCode } - explicit `x="property"` / `y="property"` - +:example{ name="candlestick" showCode } +:example{ name="data-y-range" } --> diff --git a/docs/src/content/components/Sankey.md b/docs/src/content/components/Sankey.md index b0d23cf4c..0d36db3a5 100644 --- a/docs/src/content/components/Sankey.md +++ b/docs/src/content/components/Sankey.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="simple" showCode } diff --git a/docs/src/content/components/ScatterChart.md b/docs/src/content/components/ScatterChart.md index 35fb54494..b49127ea8 100644 --- a/docs/src/content/components/ScatterChart.md +++ b/docs/src/content/components/ScatterChart.md @@ -5,19 +5,15 @@ layers: [svg, canvas, html] related: [Chart, Points] --- - - ## Usage - +:example{ name="basic" showCode } +:example{ name="custom" } --> diff --git a/docs/src/content/components/Spline.md b/docs/src/content/components/Spline.md index 935df89c9..1313e7dbb 100644 --- a/docs/src/content/components/Spline.md +++ b/docs/src/content/components/Spline.md @@ -5,52 +5,50 @@ layers: [svg, canvas] related: [Path, LineChart] --- - - -> See also: [LineChart](/docs/components/LineChart) for simplified examples +::tip +See also: [LineChart](/docs/components/LineChart) for simplified examples +:: ## Usage - +:example{ name="basic" showCode } ## Playground - +:example{ name="playground" } diff --git a/docs/src/content/components/Svg.md b/docs/src/content/components/Svg.md index c89928f64..a9cef1899 100644 --- a/docs/src/content/components/Svg.md +++ b/docs/src/content/components/Svg.md @@ -5,8 +5,4 @@ layers: [] related: [Layer] --- - - Typically you will use `` diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md index 95645197a..ae02b3f87 100644 --- a/docs/src/content/components/Text.md +++ b/docs/src/content/components/Text.md @@ -5,15 +5,11 @@ layers: [svg, canvas, html] related: [] --- - - ## Examples ### Usage - +:example{ name="playground" showCode } ## Along path @@ -21,8 +17,8 @@ related: [] The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc - +:example{ component="Arc" name="label-direction" } +:example{ name="word-wrap-with-explicit-n" } --> diff --git a/docs/src/content/components/Threshold.md b/docs/src/content/components/Threshold.md index 7aeb58536..18e1e9b2e 100644 --- a/docs/src/content/components/Threshold.md +++ b/docs/src/content/components/Threshold.md @@ -5,10 +5,6 @@ layers: [svg] related: [Threshold, AreaChart] --- - - ## Usage - +:example{ name="basic" showCode } diff --git a/docs/src/content/components/TileImage.md b/docs/src/content/components/TileImage.md index 2dfeff94d..b7352f4c3 100644 --- a/docs/src/content/components/TileImage.md +++ b/docs/src/content/components/TileImage.md @@ -5,6 +5,4 @@ layers: [svg, canvas] related: [GeoTile] --- - + diff --git a/docs/src/content/components/Tooltip.md b/docs/src/content/components/Tooltip.md index 6966772dc..ded004639 100644 --- a/docs/src/content/components/Tooltip.md +++ b/docs/src/content/components/Tooltip.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [TooltipContext, Highlight] --- - - Tooltips have 2 parts, the `TooltipContext` (which is integrated into `` and used for data selection and state management, `Tooltip` components (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, and `Tooltip.Item`) which are used for visual display. @@ -93,53 +89,53 @@ Externally access tooltip data ### Basic - +:example{ name="basic" } ### Custom content - +:example{ name="custom-content" } ### Color swatch - +:example{ name="color-swatch" } ### Color swatch using theme - +:example{ name="color-swatch-using-theme" } ### Invert variant - +:example{ name="invert-variant" } ### Position #### Default (mouse position with offset) - +:example{ name="default-mouse-position-with-offset" } #### Data Snapping - +:example{ name="data-snapping" } #### Multiple Tooltips with Fixed Single Axis - +:example{ name="multiple-tooltips-with-fixed-single-axis" } #### Multiple Tooltips with Fixed Single Axis (scaleBand) - +:example{ name="multiple-tooltips-with-fixed-single-axis-scaleband" } ### Disable motion - +:example{ name="disable-motion" } ### Anchor location - +:example{ name="anchor-location" } ### Externally access tooltip data - +:example{ name="externally-access-tooltip-data" } ## Chart Types @@ -149,7 +145,7 @@ Externally access tooltip data > quadtree-x recommended. bisect-x, voronoi, and quadtree supported. bounds and band to be improved - +:example{ name="area" } ### Stacked Area @@ -157,7 +153,7 @@ Externally access tooltip data > voronoi and quadtree recommended. bisect-x supported. bounds and band to be improved - +:example{ name="stacked-area" } ### Single Date / Time @@ -165,7 +161,7 @@ Externally access tooltip data > bisect-x recommended. band, voronoi, and quadtree supported - +:example{ name="single-date-time" } ### Duration @@ -173,7 +169,7 @@ Externally access tooltip data > bisect-band or bounds recommended. band supported (when no overlap on same band). bisect supported (when no overlap on time scale). voronoi and quadtree partially supported (using first point) - +:example{ name="duration" } ### Multiple (overlapping) Durations @@ -181,7 +177,7 @@ Externally access tooltip data > bounds recommended. voronoi and quadtree partially supported (using first point) - +:example{ name="multiple-overlapping-durations" } ### Simple Bars @@ -189,7 +185,7 @@ Externally access tooltip data > band or bounds recommended. bisect-x supported. voronoi and quadtree partially support (using value / bar top) - +:example{ name="simple-bars" } ### Multiple (overlapping) Bars @@ -197,7 +193,7 @@ Externally access tooltip data > band or bounds recommended. bisect-x supported. voronoi and quadtree partially support (using value / bar top) - +:example{ name="multiple-overlapping-bars" } ### Scatter Plot @@ -205,4 +201,4 @@ Externally access tooltip data > voronoi or quadtree recommended - --> +:example{ name="scatter-plot" } --> diff --git a/docs/src/content/components/TooltipContext.md b/docs/src/content/components/TooltipContext.md index 3552063db..d045fbd33 100644 --- a/docs/src/content/components/TooltipContext.md +++ b/docs/src/content/components/TooltipContext.md @@ -5,6 +5,4 @@ layers: [svg, canvas] related: [Chart, Tooltip, Highlight] --- - + diff --git a/docs/src/content/components/TransformContext.md b/docs/src/content/components/TransformContext.md index 749beb74b..772e6a242 100644 --- a/docs/src/content/components/TransformContext.md +++ b/docs/src/content/components/TransformContext.md @@ -14,18 +14,14 @@ related: ] --- - - ## Playground - +:example{ name="playground" } ## Pan/Zoom SVG image - +:example{ name="pan-zoom-svg-image" } ## Pan/Zoom HTML image - +:example{ name="pan-zoom-html-image" } diff --git a/docs/src/content/components/Tree.md b/docs/src/content/components/Tree.md index 3126098aa..0cf8cdf8b 100644 --- a/docs/src/content/components/Tree.md +++ b/docs/src/content/components/Tree.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [] --- - - ## Usage - +:example{ name="basic" } diff --git a/docs/src/content/components/Treemap.md b/docs/src/content/components/Treemap.md index 98ce2440d..6652ef608 100644 --- a/docs/src/content/components/Treemap.md +++ b/docs/src/content/components/Treemap.md @@ -20,8 +20,8 @@ related: [] ## Usage - +:example{ name="basic" showCode } ## Playground - +:example{ name="playground" } diff --git a/docs/src/content/components/Voronoi.md b/docs/src/content/components/Voronoi.md index 36d2d8291..b4a83d0bb 100644 --- a/docs/src/content/components/Voronoi.md +++ b/docs/src/content/components/Voronoi.md @@ -5,10 +5,6 @@ layers: [svg, canvas] related: [TooltipContext] --- - - ## Usage - +:example{ name="radius" showCode } diff --git a/docs/src/routes/docs/markdown/+page.md b/docs/src/routes/docs/markdown/+page.md index 70f23d0b4..7d7aa4e1f 100644 --- a/docs/src/routes/docs/markdown/+page.md +++ b/docs/src/routes/docs/markdown/+page.md @@ -112,6 +112,18 @@ ### Live Code +````md +``svelte live title="Counter.svelte" + + + +```` + ```svelte live title="Counter.svelte" {#if settings.layer === 'canvas'} - -
Examples broken due to Group not positioning correctly with Canvas layers
+::warning +Examples broken due to `Group` not positioning [correctly](https://github.com/techniq/layerchart/issues/662) with `Canvas` layers +:: {/if} ## Usage From bb3aaa37929ca5f7f1855a7ebe75eb57a9ea8957 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sun, 28 Dec 2025 20:08:18 -0500 Subject: [PATCH 3/5] pnpm format --- docs/scripts/stackblitz-template/src/app.html | 37 ++++++++------- docs/scripts/stackblitz-utils.ts | 5 ++- docs/src/content/components/AnnotationLine.md | 2 +- .../src/content/components/AnnotationPoint.md | 2 +- .../src/content/components/AnnotationRange.md | 2 +- docs/src/content/components/Arc.md | 1 - docs/src/content/components/Area.md | 2 +- docs/src/content/components/AreaChart.md | 2 +- docs/src/content/components/Axis.md | 2 +- docs/src/content/components/Blur.md | 2 - docs/src/content/components/Bounds.md | 2 - docs/src/content/components/ChartClipPath.md | 1 - docs/src/content/components/CircleClipPath.md | 2 - docs/src/content/components/ClipPath.md | 1 - docs/src/content/components/Connector.md | 1 - docs/src/content/components/GeoEdgeFade.md | 2 - docs/src/content/components/GeoVisible.md | 2 - docs/src/content/components/Highlight.md | 2 - docs/src/content/components/RectClipPath.md | 2 - docs/src/content/components/TileImage.md | 2 - docs/src/content/components/TooltipContext.md | 2 - docs/src/content/utils/cls.md | 8 +++- docs/src/content/utils/format.md | 8 +++- docs/src/content/utils/string.md | 11 ++++- .../components/AreaChart/basic.svelte | 8 +--- .../AreaChart/default-series-label.svelte | 8 +--- .../components/LineChart/basic.svelte | 8 +--- .../LineChart/default-series-label.svelte | 8 +--- .../lib/markdown/rehype/component-example.js | 7 +-- .../lib/markdown/rehype/handle-code-blocks.js | 6 +-- .../docs/guides/simplified-charts/+page.md | 15 +++---- docs/src/routes/docs/markdown/+page.md | 45 +++++++++++-------- .../docs/playground/template/src/app.html | 37 ++++++++------- packages/layerchart/src/lib/utils/common.ts | 2 +- 34 files changed, 114 insertions(+), 133 deletions(-) diff --git a/docs/scripts/stackblitz-template/src/app.html b/docs/scripts/stackblitz-template/src/app.html index 7e8d2402c..f93d78794 100644 --- a/docs/scripts/stackblitz-template/src/app.html +++ b/docs/scripts/stackblitz-template/src/app.html @@ -7,7 +7,7 @@ %sveltekit.head% - + diff --git a/docs/src/examples/components/AreaChart/default-series-label.svelte b/docs/src/examples/components/AreaChart/default-series-label.svelte index a4184d678..44fd09cbd 100644 --- a/docs/src/examples/components/AreaChart/default-series-label.svelte +++ b/docs/src/examples/components/AreaChart/default-series-label.svelte @@ -11,10 +11,4 @@ export { data }; - + diff --git a/docs/src/examples/components/LineChart/basic.svelte b/docs/src/examples/components/LineChart/basic.svelte index 2f1d45a7c..b4c15924c 100644 --- a/docs/src/examples/components/LineChart/basic.svelte +++ b/docs/src/examples/components/LineChart/basic.svelte @@ -6,10 +6,4 @@ export { data }; - + diff --git a/docs/src/examples/components/LineChart/default-series-label.svelte b/docs/src/examples/components/LineChart/default-series-label.svelte index 0d45d1bd8..048b81385 100644 --- a/docs/src/examples/components/LineChart/default-series-label.svelte +++ b/docs/src/examples/components/LineChart/default-series-label.svelte @@ -11,10 +11,4 @@ export { data }; - + diff --git a/docs/src/lib/markdown/rehype/component-example.js b/docs/src/lib/markdown/rehype/component-example.js index 4285ab53f..9df93cf19 100644 --- a/docs/src/lib/markdown/rehype/component-example.js +++ b/docs/src/lib/markdown/rehype/component-example.js @@ -63,12 +63,7 @@ export function rehypeComponentExample() { ] }); - if ( - index !== undefined && - parent && - typeof parent === 'object' && - 'children' in parent - ) { + if (index !== undefined && parent && typeof parent === 'object' && 'children' in parent) { const parentNode = /** @type {{ children: unknown[] }} */ (parent); if (Array.isArray(parentNode.children)) { parentNode.children.splice(index + 1, 0, sourceCodeNode); diff --git a/docs/src/lib/markdown/rehype/handle-code-blocks.js b/docs/src/lib/markdown/rehype/handle-code-blocks.js index eca68d4d8..19bb3db2c 100644 --- a/docs/src/lib/markdown/rehype/handle-code-blocks.js +++ b/docs/src/lib/markdown/rehype/handle-code-blocks.js @@ -49,9 +49,7 @@ export function rehypeCodeBlocks() { return true; } if (element.children) { - return element.children.some( - (child) => child.type === 'element' && hasDataLine(child) - ); + return element.children.some((child) => child.type === 'element' && hasDataLine(child)); } return false; } @@ -64,7 +62,7 @@ export function rehypeCodeBlocks() { const codeClassName = codeNode.properties?.className; if (Array.isArray(codeClassName)) { const langClass = codeClassName.find( - (cls) => (typeof cls === 'string' && cls.startsWith('language-')) + (cls) => typeof cls === 'string' && cls.startsWith('language-') ); if (typeof langClass === 'string') { const language = langClass.replace('language-', ''); diff --git a/docs/src/routes/docs/guides/simplified-charts/+page.md b/docs/src/routes/docs/guides/simplified-charts/+page.md index 1b0820ac4..efe17850c 100644 --- a/docs/src/routes/docs/guides/simplified-charts/+page.md +++ b/docs/src/routes/docs/guides/simplified-charts/+page.md @@ -13,7 +13,7 @@ # Simplified charts -The LayerChart project was written to offer options for both flexibility/complexity as well as approachablilty/simplicity. This brings us to a decision as you start your first LayerChart. +The LayerChart project was written to offer options for both flexibility/complexity as well as approachablilty/simplicity. This brings us to a decision as you start your first LayerChart. ## Use `` or `Simple Chart`. @@ -21,17 +21,16 @@ The LayerChart project was written to offer options for both flexibility/complex - The props details are fully up to you and fully customizable but the tradeoff is that you will need to implement more of the chart yourself. - This is a good choice if you are experienced with Layerchart or plan on a need extensive control of many of the chart components. - 2. You can use a Simple Chart if you are making a chart of supported types [ArcChart](https://next.layerchart.com/docs/components/ArcChart), [AreaChart](https://next.layerchart.com/docs/components/AreaChart), [BarChart](https://next.layerchart.com/docs/components/BarChart), [PieChart](https://next.layerchart.com/docs/components/PieChart) or [ScatterChart](https://next.layerchart.com/docs/components/ScatterChart) (more to come). - - This is the recommended path for most users. - - Under the hood, a simple chart is just a `` with a set of default subcomponents and predefined props. - - Out of the box, Simple charts provide common functionality you need with exposed props which should cover most of the simple customizations. - - Lets use <[LineChart](https://next.layerchart.com/docs/components/LineChart)> as and example and look at how little code is need to make this complex chart including built in tooltips, rule, axes, highlights and a legend. +2. You can use a Simple Chart if you are making a chart of supported types [ArcChart](https://next.layerchart.com/docs/components/ArcChart), [AreaChart](https://next.layerchart.com/docs/components/AreaChart), [BarChart](https://next.layerchart.com/docs/components/BarChart), [PieChart](https://next.layerchart.com/docs/components/PieChart) or [ScatterChart](https://next.layerchart.com/docs/components/ScatterChart) (more to come). + - This is the recommended path for most users. + - Under the hood, a simple chart is just a `` with a set of default subcomponents and predefined props. + - Out of the box, Simple charts provide common functionality you need with exposed props which should cover most of the simple customizations. + - Lets use <[LineChart](https://next.layerchart.com/docs/components/LineChart)> as and example and look at how little code is need to make this complex chart including built in tooltips, rule, axes, highlights and a legend. > Hover over a line, hover over legend items, and click legend items to see all the functionality given to you. - ## Additional Simple Charts Customization What happens when you inevidently wish to tweak something in your simplechart and that customization is not accessible via props? While you could rewrite from scratch using ``, simplecharts fortunately gives you an escape hatch. Simple charts accepts children snippets giving you full control over the subcomponents just like a layered ``. @@ -44,7 +43,7 @@ becomes -Notice how we send getLegendProps to the snippet and then pass it to the `` component. This is a common powerful pattern in `Simple charts` where you can use snippets to customize the rendering of components while still leveraging all of the the underlying simple chart's built in functionality. +Notice how we send getLegendProps to the snippet and then pass it to the `` component. This is a common powerful pattern in `Simple charts` where you can use snippets to customize the rendering of components while still leveraging all of the the underlying simple chart's built in functionality. > It is a best practice to place the `{...getLegendProps()}` as the first prop. This allows you to overwrite any of its props by listing them to subsequently. diff --git a/docs/src/routes/docs/markdown/+page.md b/docs/src/routes/docs/markdown/+page.md index 7d7aa4e1f..faa05f13a 100644 --- a/docs/src/routes/docs/markdown/+page.md +++ b/docs/src/routes/docs/markdown/+page.md @@ -112,17 +112,18 @@ ### Live Code -````md +```md ``svelte live title="Counter.svelte" + -```` +``` ```svelte live title="Counter.svelte" + +{a} +``` + +::: + +:::tab{label="B"} + +```svelte live + + +{b} +``` + +::: + +:: + ### Icons (Inline) ```md From 39236562009d58dd661444ef79a022424b2dbf87 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sun, 28 Dec 2025 20:54:08 -0500 Subject: [PATCH 5/5] Fix Arc see also tip --- docs/src/content/components/Arc.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/content/components/Arc.md b/docs/src/content/components/Arc.md index d06067786..a6e40a007 100644 --- a/docs/src/content/components/Arc.md +++ b/docs/src/content/components/Arc.md @@ -5,7 +5,9 @@ layers: [svg, canvas] related: [Pie, ArcChart, PieChart] --- -:tip See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples +::tip +See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples +:: ## Usage