[react] feat: Added docs for components/Echart

packages/react/components/Echart/index.mjs

@@ -12,6 +12,25 @@ echarts.registerTheme('dark', {
   backgroundColor: 'transparent',
 })
 
+/**
+ * A component to provide Echart functionality.
+ *
+ * This is a wrapper around Apache Echarts. The option prop is for echarts.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} [props.option = false] - The Echarts option object. This is
+ * marked as optional because this component will show a loading message when
+ * option is not an object. However, that is intended for use-cases where
+ * option relies on async code. This component is pointless if you do not
+ * (eventually) pass it an option prop.
+ * @param {string} [props.theme = 'light'] - The theme to use for echarts. Supports 'light' and 'dark'.
+ * @param {number} [props.h = 400] - The height of the chart, in pixels. Charts
+ * are rendered as SVG, we need to set a height because without a height, some
+ * browsers will not properly render the SVG element. This is an Echart
+ * limitation.
+ * @returns {JSX.Element}
+ */
 export const ChartWrapper = ({ option = false, theme = 'light', h = 400 }) => {
   return option ? (
     <ReactECharts option={option} className="class_2" theme={theme} style={{ height: h }} />

packages/react/mkdocs.sh

@@ -9,3 +9,4 @@ jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/rea
 jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json
 jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json
 jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json
+jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json

sites/dev/docs/reference/packages/react/components/echart/_examples.js

@@ -0,0 +1,103 @@
+import React from 'react'
+import { ChartWrapper } from '@freesewing/react/components/Echart'
+
+// Taken from https://echarts.apache.org/examples/en/editor.html?c=area-stack
+const option = {
+  title: {
+    text: 'Stacked Area Chart'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      name: 'Email',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      name: 'Union Ads',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      name: 'Video Ads',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      name: 'Direct',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      name: 'Search Engine',
+      type: 'line',
+      stack: 'Total',
+      label: {
+        show: true,
+        position: 'top'
+      },
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+}
+
+export const ChartWrapperExample = () => <ChartWrapper option={option} />
+

sites/dev/docs/reference/packages/react/components/echart/readme.mdx

@@ -2,6 +2,33 @@
 title: Echart
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import { jsdocChartWrapper } from '@site/prebuild/jsdoc/components.echart.mjs'
+import { ChartWrapperExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Echart** component family provides the following components:
+
+- [ChartWrapper](#chartwrapper)
+
+In addition, it also exports the following objects:
+
+- [echarts](#echarts)
+
+## EchartWrapper
+
+<ComponentDocs docs={jsdocChartWrapper} example={ChartWrapperExample} />
+
+## echarts
+
+This is a re-export of [Apache Echarts](https://echarts.apache.org/).
+
+:::tip
+#### Not FreeSewing code
+We re-export <code>echarts</code> for convenience.
+Please refer to the documentation for [Apache Echarts](https://echarts.apache.org/).
 :::
+
+</DocusaurusDoc>