@carbon/charts-react 0.59.0-beta.0 → 1.0.1

package/src/donut-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { DonutChart as DC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, DonutChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type DonutChartProps = ChartConfig<DonutChartOptions>;
-
-export default class DonutChart extends BaseChart<DonutChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: DonutChartProps;
-	chart!: DC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new DC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/gauge-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { GaugeChart as GC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, GaugeChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type GaugeChartProps = ChartConfig<GaugeChartOptions>;
-
-export default class GaugeChart extends BaseChart<GaugeChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: GaugeChartProps;
-	chart!: GC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new GC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/heatmap-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { HeatmapChart as HMC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, HeatmapChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type HeatmapChartProps = ChartConfig<HeatmapChartOptions>;
-
-export default class HeatmapChart extends BaseChart<HeatmapChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: HeatmapChartProps;
-	chart!: HMC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new HMC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/histogram-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { HistogramChart as HC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, HistogramChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type HistogramChartProps = ChartConfig<HistogramChartOptions>;
-
-export default class HistogramChart extends BaseChart<HistogramChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: HistogramChartProps;
-	chart!: HC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new HC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/index.ts

@@ -1,51 +0,0 @@
-import AreaChart from './area-chart';
-import StackedAreaChart from './area-chart-stacked';
-import GroupedBarChart from './bar-chart-grouped';
-import SimpleBarChart from './bar-chart-simple';
-import StackedBarChart from './bar-chart-stacked';
-import BoxplotChart from './boxplot-chart';
-import BubbleChart from './bubble-chart';
-import BulletChart from './bullet-chart';
-import DonutChart from './donut-chart';
-import GaugeChart from './gauge-chart';
-import HistogramChart from './histogram-chart';
-import LineChart from './line-chart';
-import LollipopChart from './lollipop-chart';
-import PieChart from './pie-chart';
-import ScatterChart from './scatter-chart';
-import MeterChart from './meter-chart';
-import RadarChart from './radar-chart';
-import ComboChart from './combo-chart';
-import TreeChart from './tree-chart';
-import TreemapChart from './treemap-chart';
-import CirclePackChart from './circle-pack-chart';
-import WordCloudChart from './wordcloud-chart';
-import AlluvialChart from './alluvial-chart';
-import HeatmapChart from './heatmap-chart';
-
-export {
-	AreaChart,
-	StackedAreaChart,
-	GroupedBarChart,
-	SimpleBarChart,
-	StackedBarChart,
-	BoxplotChart,
-	BubbleChart,
-	BulletChart,
-	DonutChart,
-	GaugeChart,
-	HistogramChart,
-	LineChart,
-	LollipopChart,
-	PieChart,
-	ScatterChart,
-	MeterChart,
-	RadarChart,
-	ComboChart,
-	TreeChart,
-	TreemapChart,
-	CirclePackChart,
-	WordCloudChart,
-	AlluvialChart,
-	HeatmapChart,
-};

package/src/line-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { LineChart as LC } from '@carbon/charts';
-import { ChartConfig, LineChartOptions } from '@carbon/charts/interfaces';
-import BaseChart from './base-chart';
-import { hasChartBeenInitialized } from './utils';
-
-type LineChartProps = ChartConfig<LineChartOptions>;
-
-export default class LineChart extends BaseChart<LineChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: LineChartProps;
-	chart!: LC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new LC(this.chartRef!, {
-				data: this.props.data as any,
-				options: this.props.options!,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/lollipop-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { LollipopChart as LC } from '@carbon/charts';
-import { ChartConfig, LollipopChartOptions } from '@carbon/charts/interfaces';
-import BaseChart from './base-chart';
-import { hasChartBeenInitialized } from './utils';
-
-type LollipopChartProps = ChartConfig<LollipopChartOptions>;
-
-export default class LollipopChart extends BaseChart<LollipopChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: LollipopChartProps;
-	chart!: LC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new LC(this.chartRef!, {
-				data: this.props.data as any,
-				options: this.props.options!,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/meter-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { MeterChart as MC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, MeterChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type MeterChartProps = ChartConfig<MeterChartOptions>;
-
-export default class MeterChart extends BaseChart<MeterChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: MeterChartProps;
-	chart!: MC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new MC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/pie-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { PieChart as PC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, PieChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type PieChartProps = ChartConfig<PieChartOptions>;
-
-export default class PieChart extends BaseChart<PieChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: PieChartProps;
-	chart!: PC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new PC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/radar-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { RadarChart as RC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, RadarChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type RadarChartProps = ChartConfig<RadarChartOptions>;
-
-export default class RadarChart extends BaseChart<RadarChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: RadarChartProps;
-	chart!: RC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new RC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/scatter-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { ScatterChart as SC } from '@carbon/charts';
-import { ChartConfig, ScatterChartOptions } from '@carbon/charts/interfaces';
-import BaseChart from './base-chart';
-import { hasChartBeenInitialized } from './utils';
-
-type ScatterChartProps = ChartConfig<ScatterChartOptions>;
-
-export default class ScatterChart extends BaseChart<ScatterChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: ScatterChartProps;
-	chart!: SC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new SC(this.chartRef, {
-				data: this.props.data as any,
-				options: this.props.options!,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/tree-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { TreeChart as TC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, TreeChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type TreeChartProps = ChartConfig<TreeChartOptions>;
-
-export default class TreeChart extends BaseChart<TreeChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: TreeChartProps;
-	chart!: TC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new TC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/treemap-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { TreemapChart as TC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, TreemapChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type TreemapChartProps = ChartConfig<TreemapChartOptions>;
-
-export default class TreemapChart extends BaseChart<TreemapChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: TreemapChartProps;
-	chart!: TC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new TC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/src/utils.ts

@@ -1,7 +0,0 @@
-const carbonPrefix = 'bx';
-const chartsPrefix = 'cc';
-
-export const hasChartBeenInitialized = (chartHolder: HTMLElement) =>
-	!!chartHolder.querySelector(
-		`div.${carbonPrefix}--${chartsPrefix}--chart-wrapper`
-	);

package/src/wordcloud-chart.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { WordCloudChart as WCC } from '@carbon/charts';
-import BaseChart from './base-chart';
-import { ChartConfig, WorldCloudChartOptions } from '@carbon/charts/interfaces';
-import { hasChartBeenInitialized } from './utils';
-
-type WordCloudChartProps = ChartConfig<WorldCloudChartOptions>;
-
-export default class WordCloudChart extends BaseChart<WorldCloudChartOptions> {
-	chartRef!: HTMLDivElement;
-	props!: WordCloudChartProps;
-	chart!: WCC;
-
-	componentDidMount() {
-		if (hasChartBeenInitialized(this.chartRef) === false) {
-			this.chart = new WCC(this.chartRef, {
-				data: this.props.data,
-				options: this.props.options,
-			});
-		}
-	}
-
-	render() {
-		return (
-			<div
-				ref={(chartRef) => (this.chartRef = chartRef!)}
-				className="chart-holder"></div>
-		);
-	}
-}

package/stories/0_intro.stories.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-const introStories = storiesOf('Docs|Getting Started', module);
-
-// Loop through the demos for the group
-introStories.add('Welcome', () => (
-  <div className="container intro">
-    <div
-      className="welcome__container"
-      style={{
-        background: 'url(./welcome.png) no-repeat center center fixed',
-        backgroundSize: 'cover',
-      }}>
-      <div className="welcome__content">
-        <h2 className="welcome__heading">Carbon Charts</h2>
-        <h4 className="welcome__heading welcome__heading--subtitle">(React)</h4>
-        <h5 className="welcome__heading welcome__heading--other">
-          Other versions
-        </h5>
-        <ul>
-          <li>
-            <a
-              href="https://charts.carbondesignsystem.com"
-              className="welcome__heading welcome__heading--other">
-              vanilla
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://charts.carbondesignsystem.com/angular"
-              className="welcome__heading welcome__heading--other">
-              Angular
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://charts.carbondesignsystem.com/vue"
-              className="welcome__heading welcome__heading--other">
-              Vue
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://charts.carbondesignsystem.com/svelte"
-              className="welcome__heading welcome__heading--other">
-              Svelte
-            </a>
-          </li>
-        </ul>
-        <span className="netlify">
-          Deploys by{' '}
-          <a href="https://netlify.com" target="_blank">
-            Netlify
-          </a>
-        </span>
-      </div>
-    </div>
-  </div>
-));

package/stories/1_gettingStarted.stories.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-// import tutorial MD strings
-import { reactGettingStartedTutorial } from './1_gettingStarted_content';
-import * as TUTORIALS from '../../core/stories/tutorials/index';
-
-// Syntax highlighting
-const hljs = require('highlight.js');
-hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'));
-hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
-
-hljs.registerLanguage(
-  'typescript',
-  require('highlight.js/lib/languages/typescript')
-);
-
-const gettingStartedStories = storiesOf('Docs|Getting Started', module);
-const tutorialStories = storiesOf('Docs|Tutorials', module);
-
-gettingStartedStories.add('Instructions', () => {
-  const demoRef = React.useRef(null);
-
-  // Add syntax highlighting
-  React.useEffect(() => {
-    if (demoRef.current) {
-      const container = demoRef.current;
-      container.querySelectorAll('pre code').forEach((block) => {
-        hljs.highlightBlock(block);
-      });
-    }
-  }, [demoRef]);
-
-  return (
-    <div
-      ref={demoRef}
-      className="container tutorial"
-      dangerouslySetInnerHTML={{
-        __html: reactGettingStartedTutorial.content,
-      }}></div>
-  );
-});
-
-// Add tutorial stories
-Object.keys(TUTORIALS).forEach((tutorialKey) => {
-  const tutorial = TUTORIALS[tutorialKey];
-
-  if (tutorial.type !== 'getting-started' && tutorial.name !== 'API') {
-    const storiesToAddTo = tutorialStories;
-
-    storiesToAddTo.add(tutorial.name, () => {
-      const demoRef = React.useRef(null);
-
-      // Add syntax highlighting
-      React.useEffect(() => {
-        if (demoRef.current) {
-          const container = demoRef.current;
-          container.querySelectorAll('pre code').forEach((block) => {
-            hljs.highlightBlock(block);
-          });
-        }
-      }, [demoRef]);
-
-      return (
-        <div
-          ref={demoRef}
-          className="container tutorial"
-          dangerouslySetInnerHTML={{
-            __html: tutorial.content,
-          }}></div>
-      );
-    });
-  }
-});