add docs

src/vue.ts

@@ -25,6 +25,7 @@ const props = {
   dataTransform: [Function, Object], // Object for null
   fillDateGapsInterval: [String, Object], // Object for null
   fillDateGapsValue: String,
+  valueDecimals: Number,
   makeCumulative: String, // Boolean
   title: String,
   subTitle: String,

website/docs/documentation/options.md

@@ -844,6 +844,20 @@ const options = {
 };
 ```
 
+### valueDecimals
+
+Number of decimal places to display for values. By default (`"preserve"`), the values in the data are used as is.
+
+- Type: `number | "preserve"`
+- Default: `"preserve"`
+- Example: [view in gallery](../gallery/value-decimals.md)
+
+```js
+const options = {
+  valueDecimals: 0,
+};
+```
+
 ### width
 
 Specifies the width of the chart.

website/docs/gallery/_gallery-demos.ts

@@ -470,3 +470,10 @@ export const topN: ChartProps = {
   title: 'World Population',
   topN: 5,
 };
+
+export const valueDecimals: ChartProps = {
+  label: 'Value Decimals',
+  dataUrl: '/data/population.csv',
+  title: 'World Population',
+  valueDecimals: 3,
+};

website/docs/gallery/value-decimals.md

@@ -0,0 +1,19 @@
+---
+title: Value Decimals
+hide_table_of_contents: true
+---
+
+import RacingBars from '../../src/components/RacingBars';
+import { valueDecimals } from './\_gallery-demos.ts';
+
+A demo for using [`valueDecimals`](../documentation/options.md#valuedecimals) to control the number of decimal places to display for values.
+
+<!--truncate-->
+
+### Chart
+
+<div className="gallery">
+  <RacingBars
+    {...valueDecimals}
+  />
+</div>

website/docs/guides/colors.md

@@ -0,0 +1,5 @@
+---
+title: Colors
+---
+
+TODO...

website/docs/guides/data-transformation.md

@@ -0,0 +1,66 @@
+---
+title: Data Transformation
+---
+
+By, default, the [loaded data](../documentation/data.md) is used as is.
+
+However, it is possible to transform the data before it is used in the chart, by one of these ways:
+
+## `dataTransform` function
+
+The [chart options](../documentation/options.md) can have a [`dataTransform`](../documentation/options.md#datatransform) function which can be used to transform the data before it is used in the chart. It receives the loaded data and returns the transformed data.
+
+Example:
+
+```js
+import { race } from 'racing-bars';
+
+const options = {
+  dataTransform: (data) =>
+    data.map((d) => ({
+      ...d,
+      icon: `https://flagsapi.com/${d.code}/flat/64.png`,
+    })),
+  title: 'World Population',
+  // ...
+};
+
+race('/data/population.csv', '#race', options);
+```
+
+## Manually loading and transforming data
+
+The [`loadData`](../documentation/api.md#loaddata) function can be used to load data. It can then be transformed before it is used in the chart.
+
+```js
+import { loadData, race } from 'racing-bars';
+
+const data = await loadData('/data/population.csv', 'csv');
+const transformedData = data.map((d) => ({
+  ...d,
+  icon: `https://flagsapi.com/${d.code}/flat/64.png`,
+}));
+
+const options = {
+  title: 'World Population',
+  // ...
+};
+
+race(transformedData, '#race', options);
+```
+
+## `valueDecimals` option
+
+In case you just need to control the number of decimal places to display for values, you do not need to transform the data. You may just use the [`valueDecimals`](../documentation/options.md#valuedecimals) option.
+
+```js
+import { race } from 'racing-bars';
+
+const options = {
+  title: 'World Population',
+  valueDecimals: 0,
+  // ...
+};
+
+race('/data/population.csv', '#race', options);
+```

website/sidebars.ts

@@ -5,9 +5,9 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
  - create an ordered group of docs
  - render a sidebar for each doc of that group
  - provide next/previous navigation
- 
+
  The sidebars can be generated from the filesystem, or explicitly defined here.
- 
+
  Create as many sidebars as you want.
  */
 const sidebars: SidebarsConfig = {
@@ -59,6 +59,7 @@ const sidebars: SidebarsConfig = {
         type: 'generated-index',
       },
       items: [
+        'guides/data-transformation',
         'guides/chart-size',
         'guides/bar-colors',
         'guides/themes-styles',