@graphenedata/cli 0.0.4 → 0.0.6

package/dist/docs/data_apps/components/charts/custom-echarts.md

@@ -1,308 +0,0 @@
----
-title: Custom ECharts
-description: Graphene charts are based on ECharts, a powerful and flexible open source charting library. You can configure any ECharts graph directly using the ECharts component.
----
-
-Our chart library is based on [ECharts](https://echarts.apache.org/examples/en/index.html), a powerful and flexible open source JavaScript chart library. We use many of the features in ECharts, and combine them with custom data transformation, logic, and theming.
-
-## `<ECharts>` Component
-
-If you would like to create a fully custom chart, you can use our built-in `<ECharts>` component. This component accepts a JavaScript object containing a chart configuration. To test this out, you can find an example on the [ECharts example page](https://echarts.apache.org/examples/en/index.html) and paste the option object into the Graphene `<ECharts>` component.
-
-This will let you create a chart that matches Graphene theming, but gives you access to the [full suite](https://echarts.apache.org/en/option.html#title) of ECharts features.
-
-The downside of this approach is that `<ECharts>` requires data to be included in the configuration object, which can be difficult depending on the type of chart you need. If you would like to use specialized ECharts features, but retain the data management you get with Graphene charts, we recommend building a [mixed-type chart](/components/charts/mixed-type-charts) and passing in an `options` object for the specific features you need.
-
-## How to Build the Configuration
-
-To create a JavaScript object in a Graphene markdown page, you need to add a `&lt;script&gt;` tag. Any objects or variables you create in that script tag are then accessible by the rest of your page using curly braces. For example, if you create a variable named `myVar`, you can show the contents of that variable in your markdown using `{myVar}`.
-
-## Examples
-
-### Simple Treemap
-
-[Link to ECharts example](https://echarts.apache.org/examples/en/editor.html?c=treemap-simple)
-
-ECharts requires the data object to have a specific format. For example in the treemap chart show below it expects the columns to be called "name" and "value". The `test_data` query in the code below renames the fields from the original query so ECharts can use them.
-
-**Example:**
-
-
-
-````markdown
-<ECharts config="
-    {
-      title: {
-        text: 'Treemap Example',
-        left: 'center'
-      ",
-        tooltip: {
-            formatter: '{b}: {c}'
-        },
-      series: [
-        {
-          type: 'treemap',
-          visibleMin: 300,
-          label: {
-            show: true,
-            formatter: '{b}'
-          },
-          itemStyle: {
-            borderColor: '#fff'
-          },
-          roam: false,
-          nodeClick: false,
-          data: [...test_data],
-          breadcrumb: {
-            show: false
-          }
-        }
-      ]
-      }
-    }
-/>
-````
-
-### Funnel Chart
-
-[Link to ECharts example](https://echarts.apache.org/examples/en/editor.html?c=funnel)
-
-ECharts requires the data object to have a specific format. For example in the funnel chart show below it expects the columns to be called "name" and "value". The `funnel_data` query in the code below renames the fields from the original query so ECharts can use them.
-
-**Example:**
-
-
-
-````markdown
-<ECharts config="
-        {
-            tooltip: {
-                formatter: '{b": {c}'
-            },
-            series: [
-                {
-                type: 'funnel',
-                data: [...funnel_data],
-                }
-            ]
-        }
-    }
-/>
-````
-
-### Pie Chart
-
-[Link to ECharts example](https://echarts.apache.org/examples/en/editor.html?c=pie-simple)
-
-ECharts requires the data object to have a specific format. For example in the pie chart show below it expects the columns to be called "name" and "value". The `pie_data` query in the code below renames the fields from the original query so ECharts can use them.
-
-**Example:**
-
-
-
-````markdown
-<ECharts config="
-    {
-        tooltip: {
-            formatter: '{b": {c} ({d}%)'
-        },
-        series: [
-        {
-          type: 'pie',
-          data: [...pie_data],
-        }
-      ]
-      }
-    }
-/>
-````
-
-### Donut Chart
-
-[Link to ECharts example](https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut)
-
-ECharts requires the data object to have a specific format. For example in the donut chart show below it expects the columns to be called "name" and "value". The `donut_data` query in the code below renames the fields from the original query so ECharts can use them.
-
-**Example:**
-
-
-
-````markdown
-<ECharts config="
-    {
-        tooltip: {
-            formatter: '{b": {c} ({d}%)'
-        },
-      series: [
-        {
-          type: 'pie',
-          radius: ['40%', '70%'],
-          data: [...donut_data],
-        }
-      ]
-      }
-    }
-/>
-````
-
-### Advanced Chart
-
-[Link to ECharts example](https://echarts.apache.org/examples/en/editor.html?c=scatter-anscombe-quartet)
-
-**Example:**
-
-```markdown
-<script>
-const dataAll = [
-  [
-    [10.0, 8.04],
-    [8.0, 6.95],
-    [13.0, 7.58],
-    [9.0, 8.81],
-    [11.0, 8.33],
-    [14.0, 9.96],
-    [6.0, 7.24],
-    [4.0, 4.26],
-    [12.0, 10.84],
-    [7.0, 4.82],
-    [5.0, 5.68]
-  ],
-  [
-    [10.0, 9.14],
-    [8.0, 8.14],
-    [13.0, 8.74],
-    [9.0, 8.77],
-    [11.0, 9.26],
-    [14.0, 8.1],
-    [6.0, 6.13],
-    [4.0, 3.1],
-    [12.0, 9.13],
-    [7.0, 7.26],
-    [5.0, 4.74]
-  ],
-  [
-    [10.0, 7.46],
-    [8.0, 6.77],
-    [13.0, 12.74],
-    [9.0, 7.11],
-    [11.0, 7.81],
-    [14.0, 8.84],
-    [6.0, 6.08],
-    [4.0, 5.39],
-    [12.0, 8.15],
-    [7.0, 6.42],
-    [5.0, 5.73]
-  ],
-  [
-    [8.0, 6.58],
-    [8.0, 5.76],
-    [8.0, 7.71],
-    [8.0, 8.84],
-    [8.0, 8.47],
-    [8.0, 7.04],
-    [8.0, 5.25],
-    [19.0, 12.5],
-    [8.0, 5.56],
-    [8.0, 7.91],
-    [8.0, 6.89]
-  ]
-];
-const markLineOpt = {
-  animation: false,
-  label: {
-    formatter: 'y = 0.5 * x + 3',
-    align: 'right'
-  },
-  lineStyle: {
-    type: 'solid'
-  },
-  tooltip: {
-    formatter: 'y = 0.5 * x + 3'
-  },
-  data: [
-    [
-      {
-        coord: [0, 3],
-        symbol: 'none'
-      },
-      {
-        coord: [20, 13],
-        symbol: 'none'
-      }
-    ]
-  ]
-};
-let options = {
-  title: {
-    text: "Anscombe's quartet",
-    left: 'center',
-    top: 0
-  },
-  grid: [
-    { left: '7%', top: '7%', width: '38%', height: '38%' },
-    { right: '7%', top: '7%', width: '38%', height: '38%' },
-    { left: '7%', bottom: '7%', width: '38%', height: '38%' },
-    { right: '7%', bottom: '7%', width: '38%', height: '38%' }
-  ],
-  tooltip: {
-    formatter: 'Group {a}: ({c})'
-  },
-  xAxis: [
-    { gridIndex: 0, min: 0, max: 20 },
-    { gridIndex: 1, min: 0, max: 20 },
-    { gridIndex: 2, min: 0, max: 20 },
-    { gridIndex: 3, min: 0, max: 20 }
-  ],
-  yAxis: [
-    { gridIndex: 0, min: 0, max: 15 },
-    { gridIndex: 1, min: 0, max: 15 },
-    { gridIndex: 2, min: 0, max: 15 },
-    { gridIndex: 3, min: 0, max: 15 }
-  ],
-  toolbox: {
-      show: true,
-      feature: {
-          saveAsImage: {
-              show: true
-          }
-      }
-  },
-  series: [
-    {
-      name: 'I',
-      type: 'scatter',
-      xAxisIndex: 0,
-      yAxisIndex: 0,
-      data: dataAll[0],
-      markLine: markLineOpt
-    },
-    {
-      name: 'II',
-      type: 'scatter',
-      xAxisIndex: 1,
-      yAxisIndex: 1,
-      data: dataAll[1],
-      markLine: markLineOpt
-    },
-    {
-      name: 'III',
-      type: 'scatter',
-      xAxisIndex: 2,
-      yAxisIndex: 2,
-      data: dataAll[2],
-      markLine: markLineOpt
-    },
-    {
-      name: 'IV',
-      type: 'scatter',
-      xAxisIndex: 3,
-      yAxisIndex: 3,
-      data: dataAll[3],
-      markLine: markLineOpt
-    }
-  ]
-};
-</script>
-
-<ECharts config="options"/>
-```

package/dist/docs/data_apps/components/charts/echarts-options.md

@@ -1,217 +0,0 @@
----
-title: ECharts Options
-description: Graphene charts are based on ECharts. Pass options to ECharts directly using the echartsOptions property.
----
-
-Graphene charts are based on ECharts. Pass options to ECharts directly using the echartsOptions property.
-
-> **Warning:** `echartsOptions` allow you to customize your chart with any combination of eCharts config options. Many config combinations can result in "broken" looking charts. Proceed with caution, and test your charts, particularly at different screen widths.
-
-ECharts settings are specified in config object. Graphene generates this config for you through the props you pass to your chart. 
-
-If you can't get your chart to look "just right" with standard chart , you can use `echartsOptions` to customize your chart by adding or overriding the eCharts config directly.
-
-## ECharts Options Object
-
-The options object is passed as follows. **Note the double curly braces.**
-
-```markdown
-<BarChart
-    data="query_name"
-    x=column_x
-    y=column_y
-    echartsOptions="{exampleOption: 'exampleValue'"}
-/>
-```
-
-See the [eCharts docs](https://echarts.apache.org/en/option.html) for a full reference of config options.
-
-Note that LLMs such as ChatGPT and GitHub Copilot are reasonably good at generating eCharts options if you explain what you are trying to achieve.
-
-## Series Options Object
-
-Often if you are making custom changes to a chart, you will need to adjust options within ECharts' `series`. When you have a multi-series chart, each series shows up separately in the ECharts configuration generated by Graphene. 
-
-For example, if you have a stacked bar with 4 series, this is what the underlying config object might look like:
-```javascript
-series: [
-    {type: 'bar', barWidth: 5, name: 'Canada', data: [200,5525,222,444,666]},
-    {type: 'bar', barWidth: 5, name: 'US', data: [1200,1555,1222,4144,6616]},
-    {type: 'bar', barWidth: 5, name: 'UK', data: [2060,525,262,4844,4666]},
-    {type: 'bar', barWidth: 5, name: 'Australia', data: [2200,5555,2252,8444,3666]}
-]
-```
-
-If you wanted to add a custom border to the bars with `echartsOptions`, you would need to manually repeat for each series. E.g.,
-
-**Example:**
-
-```html
-<BarChart
-    data="country_sales"
-    x=date
-    y=sales
-    series=country
-    echartsOptions="{
-        series: [
-            {itemStyle: {
-                borderWidth: 1,
-                borderColor: 'red'
-            "},
-            {itemStyle: {
-                borderWidth: 1,
-                borderColor: 'red'
-            }},
-            {itemStyle: {
-                borderWidth: 1,
-                borderColor: 'red'
-            }},
-            {itemStyle: {
-                borderWidth: 1,
-                borderColor: 'red'
-            }}
-        ]
-    }}
-/>
-```
-
-With `seriesOptions`, you can specify the changes once and have them applied to all series in the chart, like so:
-
-```country_sales
-select 'Canada' as country, 2020 as year, 100 as sales
-union all
-select 'Canada' as country, 2021 as year, 150 as sales
-union all
-select 'Canada' as country, 2022 as year, 200 as sales
-union all
-select 'Canada' as country, 2023 as year, 250 as sales
-union all
-select 'US' as country, 2020 as year, 200 as sales
-union all
-select 'US' as country, 2021 as year, 350 as sales
-union all
-select 'US' as country, 2022 as year, 400 as sales
-union all
-select 'US' as country, 2023 as year, 450 as sales
-```
-
-**Example:**
-
-```svelte
-<BarChart
-    data="country_sales"
-    x=date
-    y=sales
-    series=country
-    seriesOptions={{
-        itemStyle: {
-            borderWidth: 1,
-            borderColor: 'red'
-        }
-    }}
-/>
-```
-
-## Print ECharts Config
-
-You can print the current eCharts config for a chart by adding `printEchartsConfig=true` to the chart. This will print the full config just below the chart. 
-
-This includes both any default Graphene config and any `echartsOptions` you have specified, and so can be useful for debugging.
-
-```svelte
-<BarChart
-    data="query_name"
-    x=column_x
-    y=column_y
-    echartsOptions="{exampleOption: 'exampleValue'"}
-    printEchartsConfig=true
-/>
-```
-
-## Example Configs
-
-### Customize the Legend Position
-
-**Example:**
-
-```svelte
-echartsOptions="{
-    legend: {
-        right: 'right',
-        top: 'middle',
-        align: 'auto',
-        orient: 'vertical',
-        padding: 7,
-        borderColor: '#ccc',
-        borderWidth: 1,
-    ",
-    grid: {
-        right: '120px'
-    }
-}}
-```
-
-### Add Data Zoom
-
-**Example:**
-
-```svelte
-echartsOptions="{
-    dataZoom: [
-        {
-            start: 0,
-            end: 100,
-        ",
-    ],
-    grid: {
-        bottom: '50px',
-    },
-}}
-```
-
-### Add Series Labels Next to Chart
-
-**Example:**
-
-```svelte
-echartsOptions={{
-    series: [
-    {
-        endLabel: {
-            show: true,
-            formatter: (params) => params.seriesName,
-            offset: [0, 0], // [x, y] offset from the end of the line
-        }
-    },
-    {
-        endLabel: {
-            show: true,
-            formatter: (params) => params.seriesName,
-            offset: [0, 0], // [x, y] offset from the end of the line
-        }
-    }
-    ],
-    grid: {
-        right: '50px',
-        top: '10px'
-    }
-}}
-```
-
-### Add Axis Pointer to Tooltip
-
-**Example:**
-
-```svelte
-echartsOptions={{
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'cross',
-            label: {
-                backgroundColor: '#6a7985'
-            }
-        }
-    },
-}}
-```

package/dist/docs/data_apps/components/charts/funnel-chart.md

@@ -1,106 +0,0 @@
----
-title: Funnel Chart
-description: Display how a single metric changes across a series of stages. Funnel charts are widely used for visualizing conversion.
----
-
-Use funnel charts to display a single metric across a series of stages. Funnel charts are widely used for visualizing conversion.
-
-
-**Example:**
-
-```markdown
-<FunnelChart 
-    data="funnel_data" 
-    nameCol=stage
-    valueCol=customers
-/>
-```
-
-## Examples
-
-### Ascending
-
-**Example:**
-
-```markdown
-<FunnelChart 
-    data="funnel_data" 
-    nameCol=stage
-    valueCol=customers
-    funnelSort=ascending
-/>
-```
-
-### Alignment
-
-**Example:**
-
-```markdown
-<FunnelChart 
-    data="funnel_data" 
-    nameCol=stage
-    valueCol=customers
-    funnelAlign=left
-/>
-```
-
-### Show Percent Label
-
-**Example:**
-
-```markdown
-<FunnelChart 
-    data="funnel_data" 
-    nameCol=stage
-    valueCol=customers
-    showPercent=true
-/>
-```
-
-## Options
-
-### Data
-
-| Property | Required | Type | Default | Description |
-|----------|----------|------|---------|-------------|
-| data | ✓ | query name | | Query name, wrapped in curly braces |
-| nameCol | ✓ | column name | | Column to use for the name of the chart |
-| valueCol | ✓ | column name | | Column to use for the value of the chart |
-| emptySet | | error/warn/pass | error | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. |
-| emptyMessage | | string | "No records" | Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). |
-
-### Formatting & Styling
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| valueFmt | Excel-style format \| built-in format \| custom format | | Format to use for `valueCol` ([see available formats](/core-concepts/formatting)) |
-| outlineColor | CSS name \| hexademical \| RGB \| HSL | transparent | Border color. Only accepts a single color. |
-| outlineWidth | number | 1 | Border Width. It should be a natural number. |
-| labelPosition | left/right/inside | inside | Position of funnel item's label. |
-| showPercent | true/false | false | Show percentage in data labels |
-| funnelSort | none/ascending/descending | none | Data sorting of the chart. |
-| funnelAlign | left/right/center | center | Alignment of funnel. |
-| colorPalette | array of color strings (CSS name \| hexademical \| RGB \| HSL) | built-in color palette | Array of custom colours to use for the chart. E.g., `{['#cf0d06','#eb5752','#e88a87']}` |
-
-### Chart
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | string | | Chart title. Appears at top left of chart. |
-| subtitle | string | | Chart subtitle. Appears just under title. |
-| legend | true/false | true | Turns legend on or off. Legend appears at top center of chart. |
-| renderer | canvas/svg | canvas | Which chart renderer type (canvas or SVG) to use. See ECharts' [documentation on renderers](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/). |
-
-### Custom Echarts Options
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| echartsOptions | `{{exampleOption:'exampleValue'}}` | | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
-| seriesOptions | `{{exampleSeriesOption:'exampleValue'}}` | | Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See [reference page](/components/charts/echarts-options) for available options. |
-| printEchartsConfig | true/false | false | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options |
-
-### Interactivity
-
-| Property | Type | Description |
-|----------|------|-------------|
-| connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |