Removing import from chart.mdx to please Gatsby

cengage · Dec 3, 2024 · a09afcc · a09afcc
1 parent c6a9c0d
commit a09afcc
Showing 1 changed file with 38 additions and 24 deletions.
diff --git a/website/react-magma-docs/src/pages/api/chart.mdx b/website/react-magma-docs/src/pages/api/chart.mdx
@@ -4,23 +4,29 @@ title: Chart
 ---
 
 import { LeadParagraph } from '../../components/LeadParagraph';
-import '@react-magma/charts/dist/charts.css';
 
 <PageContent componentName="chart" type="api">
 
-<LeadParagraph>Magma charts enable you to convey precise and compelling narratives around data through visually appealing and accessible visualizations.</LeadParagraph>
+<LeadParagraph>
+  Magma charts enable you to convey precise and compelling narratives around
+  data through visually appealing and accessible visualizations.
+</LeadParagraph>
 
 The CarbonChart component is a wrapper for the [Carbon Design System Simple Charts](https://carbondesignsystem.com/data-visualization/simple-charts).
 
-
 <Alert variant="warning">
   <strong>Important!</strong> CarbonChart is imported from{' '}
-  <inlineCode>@react-magma/charts</inlineCode> which must be installed as a peer dependency.
-  <br/><br/>
-  In addition, you must manually import the styles:<br/><inlineCode>import '@react-magma/charts/dist/charts.css';</inlineCode>
+  <inlineCode>@react-magma/charts</inlineCode> which must be installed as a peer
+  dependency.
+  <br />
+  <br />
+  In addition, you must manually import the styles:
+  <br />
+  <inlineCode>import '@react-magma/charts/dist/charts.css';</inlineCode>
 </Alert>
 
 We currently support the following chart types:
+
 - AreaChart
 - StackedAreaChart
 - DonutChart
@@ -33,14 +39,12 @@ We currently support the following chart types:
 
 ## Area Chart
 
-Area charts share similarities with line charts, distinguished by the filled areas below the lines, adorned with colors or patterns. Stacked charts, on the other hand, prove valuable for comparing proportional contributions within a category by plotting the relative value each data series contributes to the total. 
+Area charts share similarities with line charts, distinguished by the filled areas below the lines, adorned with colors or patterns. Stacked charts, on the other hand, prove valuable for comparing proportional contributions within a category by plotting the relative value each data series contributes to the total.
 
 ```typescript
 import React from 'react';
 import { Card } from 'react-magma-dom';
 import { CarbonChart, CarbonChartType } from '@react-magma/charts';
-// IMPORTANT: Uncomment the line below for the correct styles
-// import '@react-magma/charts/dist/charts.css';
 
 export function Example() {
   const dataSet = [
@@ -115,7 +119,11 @@ export function Example() {
 
   return (
     <Card style={{ padding: '12px' }}>
-      <CarbonChart dataSet={dataSet} type={CarbonChartType.area} options={options} />
+      <CarbonChart
+        dataSet={dataSet}
+        type={CarbonChartType.area}
+        options={options}
+      />
     </Card>
   );
 }
@@ -127,8 +135,6 @@ export function Example() {
 import React from 'react';
 import { Card } from 'react-magma-dom';
 import { CarbonChart, CarbonChartType } from '@react-magma/charts';
-// IMPORTANT: Uncomment the line below for the correct styles
-// import '@react-magma/charts/dist/charts.css';
 
 export function Example() {
   const dataSet = [
@@ -176,13 +182,16 @@ export function Example() {
 
   return (
     <Card style={{ padding: '12px' }}>
-      <CarbonChart dataSet={dataSet} type={CarbonChartType.donut} options={options} />
+      <CarbonChart
+        dataSet={dataSet}
+        type={CarbonChartType.donut}
+        options={options}
+      />
     </Card>
   );
 }
 ```
 
-
 ## Line Chart
 
 Line charts depict data at regular intervals, connecting the points with lines. These visualizations are valuable for illustrating trends over time and comparing multiple datasets.
@@ -191,8 +200,6 @@ Line charts depict data at regular intervals, connecting the points with lines.
 import React from 'react';
 import { Card } from 'react-magma-dom';
 import { CarbonChart, CarbonChartType } from '@react-magma/charts';
-// IMPORTANT: Uncomment the line below for the correct styles
-// import '@react-magma/charts/dist/charts.css';
 
 export function Example() {
   const dataSet = [
@@ -319,7 +326,12 @@ export function Example() {
 
   return (
     <Card style={{ padding: '12px' }} isInverse>
-      <CarbonChart dataSet={dataSet} type={CarbonChartType.line} options={options} isInverse />
+      <CarbonChart
+        dataSet={dataSet}
+        type={CarbonChartType.line}
+        options={options}
+        isInverse
+      />
     </Card>
   );
 }
@@ -331,8 +343,6 @@ export function Example() {
 import React from 'react';
 import { Card } from 'react-magma-dom';
 import { CarbonChart, CarbonChartType } from '@react-magma/charts';
-// IMPORTANT: Uncomment the line below for the correct styles
-// import '@react-magma/charts/dist/charts.css';
 
 export function Example() {
   const dataSet = [
@@ -375,7 +385,12 @@ export function Example() {
 
   return (
     <Card style={{ padding: '12px' }} isInverse>
-      <CarbonChart dataSet={dataSet} type={CarbonChartType.pie} options={options} isInverse />
+      <CarbonChart
+        dataSet={dataSet}
+        type={CarbonChartType.pie}
+        options={options}
+        isInverse
+      />
     </Card>
   );
 }
@@ -401,8 +416,7 @@ export function Example() {
         ],
       },
       required: true,
-      description:
-        'Type of Chart: area, bar, donut, line, etc.',
+      description: 'Type of Chart: area, bar, donut, line, etc.',
     },
     dataSet: {
       type: {
@@ -417,7 +431,8 @@ export function Example() {
         name: 'object',
       },
       required: true,
-      description: 'For a complete list of options, see Carbon Charts documentation',
+      description:
+        'For a complete list of options, see Carbon Charts documentation',
       defaultValue: '{}',
     },
     isInverse: {
@@ -427,7 +442,6 @@ export function Example() {
       required: false,
       defaultValue: false,
     },
-
   }}
 />