reflex-silverpoint-react 0.1.0__tar.gz

reflex_silverpoint_react-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ernesto Crespo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

reflex_silverpoint_react-0.1.0/PKG-INFO

@@ -0,0 +1,224 @@
+Metadata-Version: 2.4
+Name: reflex-silverpoint-react
+Version: 0.1.0
+Summary: The 33 silverpoint charts (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react
+Author-email: Ernesto Crespo <ecrespo@gmail.com>
+License: MIT
+Project-URL: Homepage, https://github.com/ecrespo/reflex-silverpoint-react
+Project-URL: Source, https://github.com/ecrespo/reflex-silverpoint-react
+Project-URL: Issues, https://github.com/ecrespo/reflex-silverpoint-react/issues
+Project-URL: Upstream, https://github.com/ecrespo/silverpoint
+Keywords: reflex,reflex-custom-components,charts,silverpoint,data-visualization,svg
+Classifier: Development Status :: 4 - Beta
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Topic :: Scientific/Engineering :: Visualization
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: reflex>=0.9.12
+Provides-Extra: dev
+Requires-Dist: build; extra == "dev"
+Requires-Dist: twine; extra == "dev"
+Requires-Dist: pytest; extra == "dev"
+Requires-Dist: ruff; extra == "dev"
+Dynamic: license-file
+
+# reflex-silverpoint-react
+
+A [Reflex](https://reflex.dev) custom component for **[silverpoint](https://github.com/ecrespo/silverpoint)**:
+charts drawn in the manner of a Renaissance silverpoint drawing, with a fine silver line on a
+prepared ground, tone built from hatching, and white heightening on the live value.
+
+The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
+has a `precision` mode that turns the inking off.
+
+It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.1.1 and exposes
+**all 33 charts**, the `SilverpointProvider`, the interaction events, custom readouts and the
+imperative handle (SVG export and geometry) as Python.
+
+![The gallery of the demo app](docs/gallery.png)
+
+## Installation
+
+```bash
+pip install reflex-silverpoint-react
+# or
+uv add reflex-silverpoint-react
+```
+
+Nothing else to do on the JavaScript side: Reflex installs `@silverpoint/react`,
+`@silverpoint/core`, `@silverpoint/grounds` and `@silverpoint/fonts`, and every chart imports the two
+stylesheets it needs (`@silverpoint/grounds/styles.css` and the self-hosted EB Garamond of
+`@silverpoint/fonts/fonts.css`). No Tailwind, no CDN.
+
+Requires Reflex 0.9.12 or later (React 19).
+
+## Quickstart
+
+```python
+import reflex as rx
+from reflex_silverpoint_react import line_chart
+
+DATA = [
+    {"hour": "00", "hits": 18},
+    {"hour": "04", "hits": 11},
+    {"hour": "08", "hits": 42},
+    {"hour": "12", "hits": 64},
+    {"hour": "16", "hits": 57},
+    {"hour": "20", "hits": 30},
+]
+
+
+def index() -> rx.Component:
+    return rx.box(
+        line_chart(data=DATA, x_key="hour", value_key="hits", title="Hits per hour"),
+        width="480px",
+    )
+
+
+app = rx.App()
+app.add_page(index)
+```
+
+The chart takes the width of its container; `height` is the height of the drawing area (160 px by
+default). Omit `data` and a chart draws its own demo dataset.
+
+Props are the React props in `snake_case`: `xKey` → `x_key`, `hatchFill` → `hatch_fill`,
+`footerRight` → `footer_right`, `centerLabel` → `center_label`, and so on. `data` and every prop can
+be a Reflex state var.
+
+## The 33 charts
+
+| Family | Charts |
+|---|---|
+| Lines | `line_chart`, `step_chart`, `sparkline_rows`, `kpi_card` |
+| Bars | `bar_chart`, `stacked_bar_chart`, `composed_chart`, `waterfall_chart`, `funnel_chart`, `bullet_chart`, `pyramid_chart`, `candlestick_chart` |
+| Areas | `area_chart`, `range_band_chart`, `stream_chart` |
+| Points & grids | `scatter_chart`, `bubble_chart`, `heatmap_chart`, `treemap_chart`, `activity_grid` |
+| Flows | `sankey_chart`, `chord_ring` |
+| Radial | `donut_chart`, `radar_chart`, `polar_bar_chart`, `radial_arc_group`, `radial_rings`, `gauge_arc`, `meter_chart`, `coxcomb_chart`, `wind_rose`, `volvelle_chart`, `orbit_chart` |
+
+Every factory has a class of the same name in `PascalCase` (`LineChart`, `WindRose`…).
+`reflex_silverpoint_react.CHARTS` is the whole catalog with each chart's family and the reference of
+its own props (`COMMON_PROPS` holds the shared ones), handy for galleries and documentation.
+
+## Props every chart shares
+
+| Prop | Default | |
+|---|---|---|
+| `data` | demo dataset | The rows to draw: a list of dicts. |
+| `ground` / `substrate` / `mode` | `"silverpoint"` / `"cream"` / `"ink"` | Style. Substrates: `cream`, `green`, `blue`, `ochre`. `mode="precision"` turns the inking off. |
+| `seed`, `id` | derived, stable | The hand drawing is deterministic: same props, same strokes. |
+| `height`, `width` | `160`, container width | Size of the drawing area in px. |
+| `chrome` | `"card"` | `"bare"` draws only the plot. |
+| `title`, `badge`, `value`, `unit`, `footer_left`, `footer_right` | — | The card's text. |
+| `label`, `description`, `data_table` | from `title`, —, `"hidden"` | Accessibility. |
+| `locale`, `number_format` | environment | Number formatting (`number_format` is a dict of `Intl.NumberFormatOptions`). |
+| `hatch_fill` | `"tile"` | `"per-shape"` gives richer hatching at a much greater weight. |
+| `tooltip` | built-in readout | A custom readout; see `tooltip_template`. |
+| `on_active_change`, `on_select` | — | Events; see below. |
+
+## One ground for the whole app
+
+```python
+from reflex_silverpoint_react import bar_chart, donut_chart, silverpoint_provider
+
+silverpoint_provider(
+    bar_chart(data=sales, x_key="month", value_key="units", title="Units sold", unit="units"),
+    donut_chart(data=channels, name_key="channel", value_key="share", title="Sales by channel", center_label="%"),
+    ground="silverpoint",
+    substrate="green",
+    locale="en-GB",
+)
+```
+
+A prop on a chart always wins over the provider. The provider's props can be state vars, so one
+select can re-ground a whole dashboard.
+
+## Interaction
+
+```python
+class State(rx.State):
+    active: str = "—"
+
+    @rx.event
+    def on_active(self, item: dict | None):
+        self.active = "—" if item is None else f"{item['datum']['hour']}: {item['value']}"
+
+    @rx.event
+    def on_select(self, item: dict):
+        print("selected", item["datum"])
+
+
+line_chart(
+    data=DATA,
+    x_key="hour",
+    value_key="hits",
+    on_active_change=State.on_active,
+    on_select=State.on_select,
+    tooltip=tooltip_template("{datum.hour} h · {value} hits"),
+)
+```
+
+- `on_active_change` receives the item under the pointer or keyboard focus, and `None` when it
+  leaves. `on_select` fires on click, `Enter` or `Space`. The item is
+  `{"seriesKey", "index", "datum", "value", "point": {"x", "y"}}`.
+- `tooltip_template(text)` builds the `tooltip` render function from a format string. Placeholders:
+  `{heading}`, `{text}` (the built-in readout's two lines), `{announcement}`, `{value}`, `{index}`,
+  `{series}` and `{datum.<field>}`. `{{` and `}}` print literal braces.
+
+## Export: the imperative handle
+
+Give a chart an `id` and its `ChartHandle` is reachable from Python:
+
+```python
+from reflex_silverpoint_react import download_svg, get_geometry, get_svg
+
+line_chart(id="hits", data=DATA, x_key="hour", value_key="hits")
+
+rx.button("Download SVG", on_click=download_svg("hits", "hits.svg"))  # in the browser
+rx.button("SVG to Python", on_click=get_svg("hits", State.receive_svg))  # handler gets a str
+rx.button("Geometry", on_click=get_geometry("hits", State.receive_geometry))  # handler gets a dict
+```
+
+The exported SVG carries its own ground colours, so it renders the same outside the app.
+
+## Notes
+
+- `volvelle_chart`: `index_ring` and `index_value` apply to your own rings, so pass `data` when you
+  use them (the demo dataset keeps its own index).
+- `gauge_arc` and `meter_chart` take `percent` (0-100) instead of `data`.
+- Charts switch to `precision` by themselves under `prefers-contrast: more` or
+  `forced-colors: active`; no prop overrides that.
+- Accessors are field names (strings). The JavaScript API also accepts functions; from Python, shape
+  your rows instead.
+
+## Demo app
+
+```bash
+uv venv && uv pip install -e .
+cd silverpoint_react_demo
+uv run reflex run
+```
+
+Pages: **Start** (quickstart, provider, ink vs precision), **Gallery** (the 33 charts, ground
+controls, demo datasets vs data from Python state with a re-roll), **Playground** (one chart, every
+rendering choice and the Python that reproduces it), **Interaction** (events, custom readout, a
+volvelle that turns on click, live KPI/gauge/meter, SVG and geometry export) and one **reference
+page per chart** (`/chart/<slug>`) with its props.
+
+![Interaction page](docs/interaction.png)
+
+## Development
+
+```bash
+uv venv && uv pip install -e ".[dev]"
+uv run pytest
+uv run ruff check .
+uv run reflex component build   # .pyi stubs + sdist and wheel in dist/
+```
+
+## License
+
+MIT. silverpoint is MIT; the EB Garamond typeface is under the SIL Open Font License.

reflex_silverpoint_react-0.1.0/README.md

@@ -0,0 +1,198 @@
+# reflex-silverpoint-react
+
+A [Reflex](https://reflex.dev) custom component for **[silverpoint](https://github.com/ecrespo/silverpoint)**:
+charts drawn in the manner of a Renaissance silverpoint drawing, with a fine silver line on a
+prepared ground, tone built from hatching, and white heightening on the live value.
+
+The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
+has a `precision` mode that turns the inking off.
+
+It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.1.1 and exposes
+**all 33 charts**, the `SilverpointProvider`, the interaction events, custom readouts and the
+imperative handle (SVG export and geometry) as Python.
+
+![The gallery of the demo app](docs/gallery.png)
+
+## Installation
+
+```bash
+pip install reflex-silverpoint-react
+# or
+uv add reflex-silverpoint-react
+```
+
+Nothing else to do on the JavaScript side: Reflex installs `@silverpoint/react`,
+`@silverpoint/core`, `@silverpoint/grounds` and `@silverpoint/fonts`, and every chart imports the two
+stylesheets it needs (`@silverpoint/grounds/styles.css` and the self-hosted EB Garamond of
+`@silverpoint/fonts/fonts.css`). No Tailwind, no CDN.
+
+Requires Reflex 0.9.12 or later (React 19).
+
+## Quickstart
+
+```python
+import reflex as rx
+from reflex_silverpoint_react import line_chart
+
+DATA = [
+    {"hour": "00", "hits": 18},
+    {"hour": "04", "hits": 11},
+    {"hour": "08", "hits": 42},
+    {"hour": "12", "hits": 64},
+    {"hour": "16", "hits": 57},
+    {"hour": "20", "hits": 30},
+]
+
+
+def index() -> rx.Component:
+    return rx.box(
+        line_chart(data=DATA, x_key="hour", value_key="hits", title="Hits per hour"),
+        width="480px",
+    )
+
+
+app = rx.App()
+app.add_page(index)
+```
+
+The chart takes the width of its container; `height` is the height of the drawing area (160 px by
+default). Omit `data` and a chart draws its own demo dataset.
+
+Props are the React props in `snake_case`: `xKey` → `x_key`, `hatchFill` → `hatch_fill`,
+`footerRight` → `footer_right`, `centerLabel` → `center_label`, and so on. `data` and every prop can
+be a Reflex state var.
+
+## The 33 charts
+
+| Family | Charts |
+|---|---|
+| Lines | `line_chart`, `step_chart`, `sparkline_rows`, `kpi_card` |
+| Bars | `bar_chart`, `stacked_bar_chart`, `composed_chart`, `waterfall_chart`, `funnel_chart`, `bullet_chart`, `pyramid_chart`, `candlestick_chart` |
+| Areas | `area_chart`, `range_band_chart`, `stream_chart` |
+| Points & grids | `scatter_chart`, `bubble_chart`, `heatmap_chart`, `treemap_chart`, `activity_grid` |
+| Flows | `sankey_chart`, `chord_ring` |
+| Radial | `donut_chart`, `radar_chart`, `polar_bar_chart`, `radial_arc_group`, `radial_rings`, `gauge_arc`, `meter_chart`, `coxcomb_chart`, `wind_rose`, `volvelle_chart`, `orbit_chart` |
+
+Every factory has a class of the same name in `PascalCase` (`LineChart`, `WindRose`…).
+`reflex_silverpoint_react.CHARTS` is the whole catalog with each chart's family and the reference of
+its own props (`COMMON_PROPS` holds the shared ones), handy for galleries and documentation.
+
+## Props every chart shares
+
+| Prop | Default | |
+|---|---|---|
+| `data` | demo dataset | The rows to draw: a list of dicts. |
+| `ground` / `substrate` / `mode` | `"silverpoint"` / `"cream"` / `"ink"` | Style. Substrates: `cream`, `green`, `blue`, `ochre`. `mode="precision"` turns the inking off. |
+| `seed`, `id` | derived, stable | The hand drawing is deterministic: same props, same strokes. |
+| `height`, `width` | `160`, container width | Size of the drawing area in px. |
+| `chrome` | `"card"` | `"bare"` draws only the plot. |
+| `title`, `badge`, `value`, `unit`, `footer_left`, `footer_right` | — | The card's text. |
+| `label`, `description`, `data_table` | from `title`, —, `"hidden"` | Accessibility. |
+| `locale`, `number_format` | environment | Number formatting (`number_format` is a dict of `Intl.NumberFormatOptions`). |
+| `hatch_fill` | `"tile"` | `"per-shape"` gives richer hatching at a much greater weight. |
+| `tooltip` | built-in readout | A custom readout; see `tooltip_template`. |
+| `on_active_change`, `on_select` | — | Events; see below. |
+
+## One ground for the whole app
+
+```python
+from reflex_silverpoint_react import bar_chart, donut_chart, silverpoint_provider
+
+silverpoint_provider(
+    bar_chart(data=sales, x_key="month", value_key="units", title="Units sold", unit="units"),
+    donut_chart(data=channels, name_key="channel", value_key="share", title="Sales by channel", center_label="%"),
+    ground="silverpoint",
+    substrate="green",
+    locale="en-GB",
+)
+```
+
+A prop on a chart always wins over the provider. The provider's props can be state vars, so one
+select can re-ground a whole dashboard.
+
+## Interaction
+
+```python
+class State(rx.State):
+    active: str = "—"
+
+    @rx.event
+    def on_active(self, item: dict | None):
+        self.active = "—" if item is None else f"{item['datum']['hour']}: {item['value']}"
+
+    @rx.event
+    def on_select(self, item: dict):
+        print("selected", item["datum"])
+
+
+line_chart(
+    data=DATA,
+    x_key="hour",
+    value_key="hits",
+    on_active_change=State.on_active,
+    on_select=State.on_select,
+    tooltip=tooltip_template("{datum.hour} h · {value} hits"),
+)
+```
+
+- `on_active_change` receives the item under the pointer or keyboard focus, and `None` when it
+  leaves. `on_select` fires on click, `Enter` or `Space`. The item is
+  `{"seriesKey", "index", "datum", "value", "point": {"x", "y"}}`.
+- `tooltip_template(text)` builds the `tooltip` render function from a format string. Placeholders:
+  `{heading}`, `{text}` (the built-in readout's two lines), `{announcement}`, `{value}`, `{index}`,
+  `{series}` and `{datum.<field>}`. `{{` and `}}` print literal braces.
+
+## Export: the imperative handle
+
+Give a chart an `id` and its `ChartHandle` is reachable from Python:
+
+```python
+from reflex_silverpoint_react import download_svg, get_geometry, get_svg
+
+line_chart(id="hits", data=DATA, x_key="hour", value_key="hits")
+
+rx.button("Download SVG", on_click=download_svg("hits", "hits.svg"))  # in the browser
+rx.button("SVG to Python", on_click=get_svg("hits", State.receive_svg))  # handler gets a str
+rx.button("Geometry", on_click=get_geometry("hits", State.receive_geometry))  # handler gets a dict
+```
+
+The exported SVG carries its own ground colours, so it renders the same outside the app.
+
+## Notes
+
+- `volvelle_chart`: `index_ring` and `index_value` apply to your own rings, so pass `data` when you
+  use them (the demo dataset keeps its own index).
+- `gauge_arc` and `meter_chart` take `percent` (0-100) instead of `data`.
+- Charts switch to `precision` by themselves under `prefers-contrast: more` or
+  `forced-colors: active`; no prop overrides that.
+- Accessors are field names (strings). The JavaScript API also accepts functions; from Python, shape
+  your rows instead.
+
+## Demo app
+
+```bash
+uv venv && uv pip install -e .
+cd silverpoint_react_demo
+uv run reflex run
+```
+
+Pages: **Start** (quickstart, provider, ink vs precision), **Gallery** (the 33 charts, ground
+controls, demo datasets vs data from Python state with a re-roll), **Playground** (one chart, every
+rendering choice and the Python that reproduces it), **Interaction** (events, custom readout, a
+volvelle that turns on click, live KPI/gauge/meter, SVG and geometry export) and one **reference
+page per chart** (`/chart/<slug>`) with its props.
+
+![Interaction page](docs/interaction.png)
+
+## Development
+
+```bash
+uv venv && uv pip install -e ".[dev]"
+uv run pytest
+uv run ruff check .
+uv run reflex component build   # .pyi stubs + sdist and wheel in dist/
+```
+
+## License
+
+MIT. silverpoint is MIT; the EB Garamond typeface is under the SIL Open Font License.

reflex_silverpoint_react-0.1.0/custom_components/reflex_silverpoint_react/__init__.py

@@ -0,0 +1,170 @@
+"""reflex-silverpoint-react: silverpoint charts for Reflex.
+
+Charts drawn in the manner of a Renaissance silverpoint drawing, wrapping ``@silverpoint/react``.
+"""
+
+from .base import (
+    SILVERPOINT_LIBRARY,
+    SILVERPOINT_STYLESHEETS,
+    SILVERPOINT_VERSION,
+    SilverpointChart,
+    SilverpointProvider,
+    silverpoint_provider,
+)
+from .catalog import CHARTS, COMMON_PROPS, FAMILIES, ChartInfo, PropDoc, chart_by_name, chart_by_slug
+from .charts import (
+    ActivityGrid,
+    AreaChart,
+    BarChart,
+    BubbleChart,
+    BulletChart,
+    CandlestickChart,
+    ChordRing,
+    ComposedChart,
+    CoxcombChart,
+    DonutChart,
+    FunnelChart,
+    GaugeArc,
+    HeatmapChart,
+    KpiCard,
+    LineChart,
+    MeterChart,
+    OrbitChart,
+    PolarBarChart,
+    PyramidChart,
+    RadarChart,
+    RadialArcGroup,
+    RadialRings,
+    RangeBandChart,
+    SankeyChart,
+    ScatterChart,
+    SparklineRows,
+    StackedBarChart,
+    StepChart,
+    StreamChart,
+    TreemapChart,
+    VolvelleChart,
+    WaterfallChart,
+    WindRose,
+    activity_grid,
+    area_chart,
+    bar_chart,
+    bubble_chart,
+    bullet_chart,
+    candlestick_chart,
+    chord_ring,
+    composed_chart,
+    coxcomb_chart,
+    donut_chart,
+    funnel_chart,
+    gauge_arc,
+    heatmap_chart,
+    kpi_card,
+    line_chart,
+    meter_chart,
+    orbit_chart,
+    polar_bar_chart,
+    pyramid_chart,
+    radar_chart,
+    radial_arc_group,
+    radial_rings,
+    range_band_chart,
+    sankey_chart,
+    scatter_chart,
+    sparkline_rows,
+    stacked_bar_chart,
+    step_chart,
+    stream_chart,
+    treemap_chart,
+    volvelle_chart,
+    waterfall_chart,
+    wind_rose,
+)
+from .helpers import chart_ref, download_svg, get_geometry, get_svg, tooltip_template
+
+__all__ = [
+    "CHARTS",
+    "COMMON_PROPS",
+    "FAMILIES",
+    "SILVERPOINT_LIBRARY",
+    "SILVERPOINT_STYLESHEETS",
+    "SILVERPOINT_VERSION",
+    "ActivityGrid",
+    "AreaChart",
+    "BarChart",
+    "BubbleChart",
+    "BulletChart",
+    "CandlestickChart",
+    "ChartInfo",
+    "ChordRing",
+    "ComposedChart",
+    "CoxcombChart",
+    "DonutChart",
+    "FunnelChart",
+    "GaugeArc",
+    "HeatmapChart",
+    "KpiCard",
+    "LineChart",
+    "MeterChart",
+    "OrbitChart",
+    "PolarBarChart",
+    "PropDoc",
+    "PyramidChart",
+    "RadarChart",
+    "RadialArcGroup",
+    "RadialRings",
+    "RangeBandChart",
+    "SankeyChart",
+    "ScatterChart",
+    "SilverpointChart",
+    "SilverpointProvider",
+    "SparklineRows",
+    "StackedBarChart",
+    "StepChart",
+    "StreamChart",
+    "TreemapChart",
+    "VolvelleChart",
+    "WaterfallChart",
+    "WindRose",
+    "activity_grid",
+    "area_chart",
+    "bar_chart",
+    "bubble_chart",
+    "bullet_chart",
+    "candlestick_chart",
+    "chart_by_name",
+    "chart_by_slug",
+    "chart_ref",
+    "chord_ring",
+    "composed_chart",
+    "coxcomb_chart",
+    "donut_chart",
+    "download_svg",
+    "funnel_chart",
+    "gauge_arc",
+    "get_geometry",
+    "get_svg",
+    "heatmap_chart",
+    "kpi_card",
+    "line_chart",
+    "meter_chart",
+    "orbit_chart",
+    "polar_bar_chart",
+    "pyramid_chart",
+    "radar_chart",
+    "radial_arc_group",
+    "radial_rings",
+    "range_band_chart",
+    "sankey_chart",
+    "scatter_chart",
+    "silverpoint_provider",
+    "sparkline_rows",
+    "stacked_bar_chart",
+    "step_chart",
+    "stream_chart",
+    "tooltip_template",
+    "treemap_chart",
+    "volvelle_chart",
+    "waterfall_chart",
+    "wind_rose",
+]