11 |
12 | ## Installation
13 |
14 | Install this plugin in the same environment as Datasette.
15 |
16 | ```bash
17 | datasette install datasette-plot
18 | ```
19 |
20 | ## Usage
21 |
22 | Once installed, table pages and SQL query pages will have a new "Show plot" button that will open the `datasette-plot`.
23 |
24 | 
25 |
26 | Currently, `datasette-plot` only supports a few [visualization marks](https://observablehq.com/plot/features/marks) from Plot, including dot, line, area, bar, and more.
27 |
28 |
29 |
30 | Use the `Link to this plot` URL to share visualization with others. The link will have your plot options encoded in the URL.
31 |
32 | ## Development
33 |
34 | To set up this plugin locally, first checkout the code. Then create a new virtual environment:
35 |
36 | ```bash
37 | cd datasette-plot
38 | python3 -m venv venv
39 | source venv/bin/activate
40 | ```
41 |
42 | Now install the dependencies and test dependencies:
43 |
44 | ```bash
45 | pip install -e '.[test]'
46 | ```
47 |
48 | To run the tests:
49 |
50 | ```bash
51 | pytest
52 | ```
53 |
--------------------------------------------------------------------------------
/datasette_plot/__init__.py:
--------------------------------------------------------------------------------
1 | from datasette import hookimpl
2 | import json
3 |
4 |
5 | @hookimpl
6 | def extra_body_script(
7 | template, database, table, columns, view_name, request, datasette
8 | ):
9 | url = datasette.urls.path("/-/static-plugins/datasette-plot/main.min.js")
10 | return f"import({json.dumps(url)}).then(d => d.main())"
11 |
12 |
13 | @hookimpl
14 | def extra_css_urls(template, database, table, columns, view_name, request, datasette):
15 | return [datasette.urls.path("/-/static-plugins/datasette-plot/main.min.css")]
16 |
--------------------------------------------------------------------------------
/datasette_plot/frontend/components/marks.tsx:
--------------------------------------------------------------------------------
1 | import { h } from "preact";
2 | import { useEffect, useId, useState } from "preact/hooks";
3 | import {
4 | MarkOptions,
5 | DotOptions,
6 | AreaYOptions,
7 | BarYOptions,
8 | LineYOptions,
9 | LinearRegressionYOptions,
10 | lineY,
11 | barY,
12 | } from "@observablehq/plot";
13 |
14 | function ChanelValueSelector(props: {
15 | required: boolean;
16 | title: string;
17 | columns: string[];
18 | value: string | undefined;
19 | setValue: (v: string | undefined) => void;
20 | }) {
21 | const { title, columns, value, setValue, required } = props;
22 | const [show, setShow] = useState