From 20ebe323ab5dbf6d576e8a3db638c2ff097c8023 Mon Sep 17 00:00:00 2001 From: Alex <94073946+Alex-NRCan@users.noreply.github.com> Date: Fri, 1 Dec 2023 09:55:04 -0500 Subject: [PATCH] Update README.md --- README.md | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fbe4d50..0fcb0d0 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Developpers can import this project from their package.json directly and then im There are 3 essential props for this component: inputs, data and options. - `inputs` is the main one and accepts an elaborate configuration json detailed below; - `data` is the equivalent of the ChartJS `data` props, to bypass the `inputs` and play with ChartJS directly; -- `options` is the equivalent of the ChartJS `options` props, to bypass the `inputs` props and play with ChartJS directly +- `options` is the equivalent of the ChartJS `options` props, to bypass the `inputs` props and play with ChartJS directly; ### The 'inputs` configuration is detailed like so: ``` @@ -103,18 +103,25 @@ There are 3 essential props for this component: inputs, data and options. } ``` +#### Chart property - chart: is the type of chart to build - supported values are: `'line'`, `'bar'`, `'pie'` and `'doughnut'`; + +#### Query property - query: groups information on how the data should be queried in the table source; - query.type?: indicates the kind of query to perform - supported values are: `'esriRegular'`, `'ogcAPIFeatures'` and `'json'`; - query.url?: indicates the url where to fetch the data to build the chart with - supported urls are Esri services, OGC API Features services or urls pointing to a .json file built on the GeoJson format; - query.queryOptions.whereClauses?: indicates how to generate the where clause to fetch the correct data in the table source. This is an array to support filtering on more than 1 field. The `and` operator is implicit; - query.queryOptions.whereClauses.field: indicates the field name, in the table source, on which to filter; - query.queryOptions.whereClauses.prefix/suffix: indicates the prefix/suffix to use to build the query (useful to support single-quotes when the attribute to query is a string); +- query.queryOptions.whereClauses.valueIs: indicates the value as a literal information (not read from a property name from the datasource); - query.queryOptions.whereClauses.valueFrom: ***{tricky one}*** indicates the property name, in the datasource(!) (detailed below), to use to query the table source (the url); - query.queryOptions.orderByField?: indicates the property on which to order the results of the data coming from the table source; + +#### Geochart property - geochart: groups information on how to build the chart; - geochart.borderWidth?: indicates the thickness of the borders (or lines in the `line` chart); - geochart.useSteps?: indicates if the line chart should use steps - supported values are: `'before'`, `'middle'`, `'after'`, `false`; +- geochart.tension?: indicates if the line chart should use tension when drawing the line between the values; - geochart.xAxis: indicates information on the x axis; - geochart.xAxis.property: indicates the property name on which to read the information from the table source; - geochart.xAxis.label?: indicates the name of the axis to be displayed under the line chart; @@ -131,24 +138,36 @@ There are 3 essential props for this component: inputs, data and options. - geochart.yAxis.paletteBackgrounds?: indicates the array of rgba color values to use as the palette for background coloring; - geochart.yAxis.paletteBorders?: indicates the array of rgb color values to use as the palette for border coloring; - geochart.yAxis.tooltipSuffix?: indicates the suffix to use on for the values when displayed in the tooltip; + +#### Category property - category?: indicates how the data from the table source should be categorized (this creates the datasets aka the legend); - category.usePalette?: indicates if a pre-determined (GeoChart specific) color palette should be used; +- geochart.yAxis.paletteBackgrounds?: indicates the array of rgba color values to use as the palette for background coloring; +- geochart.yAxis.paletteBorders?: indicates the array of rgb color values to use as the palette for border coloring; + +#### UI property - ui?: indicates what ui elements to show with the chart; - ui.xSlider?: groups information on the x slider; - ui.xSlider.display?: indicates if the slider should be displayed; -- ui.xSlider.steps?: indicates the steps the slider should jump when sliding; +- ui.xSlider.step?: indicates the steps the slider should jump when sliding; +- ui.xSlider.min?: indicates the minimum value for the slider; +- ui.xSlider.max?: indicates the maximum value for the slider; - ui.ySlider?: groups information on the y slider; - ui.ySlider.display?: indicates if the slider should be displayed; -- ui.ySlider.steps?: indicates the steps the slider should jump when sliding; +- ui.ySlider.step?: indicates the steps the slider should jump when sliding; - ui.stepsSwitcher?: indicates if the select drop down to switch the steps on-the-fly is displayed; - ui.resetStates?: indicates if the button to reset the states is displayed; - ui.description?: indicates the description text to show at the bottom of the chart; - ui.download?: indicates if a download button should be displayed; + +#### Datasources property - datasources: groups information on the datasources to build the datasource drop down and the chart; - datasources.display: indicates the string to be displayed in the drop down; - datasources.value: indicates the inner value used for the `sourceItem`; - datasources.sourceItem: indicates the source item used as reference to query the data from. This property has an object with a property that should equal the property in `query.queryOptions.whereClauses.valueFrom`; - datasources.items?: indicates the actual `items`, associated with the `datasources.sourceItem`, used to build the chart with. When `items` is specified, the data isn't fetched with the `query.url`; + +#### chartjsOptions property - chartjsOptions?: indicates further `ChartJS specific` `options` to open the door to further customization when natively supported by `ChartJS` (ref: [here](https://www.chartjs.org/docs/latest/general/options.html)); *Note: `?` represents optional configuration properties.*