848 lines
35 KiB
JavaScript
Executable File
848 lines
35 KiB
JavaScript
Executable File
import React from 'react';
|
|
|
|
import {
|
|
Container,
|
|
Row,
|
|
Col,
|
|
Card,
|
|
CardBody,
|
|
CardDeck,
|
|
Button
|
|
} from './../../../components'
|
|
import { HeaderMain } from "../../components/HeaderMain";
|
|
import { HeaderDemo } from "../../components/HeaderDemo";
|
|
|
|
import { SimpleBarChart } from "./components/SimpleBarChart";
|
|
import { StackedBarChart } from "./components/StackedBarChart";
|
|
import { MixBarChart } from "./components/MixBarChart";
|
|
import { PositiveAndNegativeBarChart } from "./components/PositiveAndNegativeBarChart";
|
|
import { BarChartStackedBySign } from "./components/BarChartStackedBySign";
|
|
import { BarChartHasBackground } from "./components/BarChartHasBackground";
|
|
import { SimpleLineChart } from "./components/SimpleLineChart";
|
|
import { DashedLineChart } from "./components/DashedLineChart";
|
|
import { VerticalLineChart } from "./components/VerticalLineChart";
|
|
import { CustomizedLabelLineChart } from './components/CustomizedLabelLineChart';
|
|
import { SimpleAreaChart } from "./components/SimpleAreaChart";
|
|
import { StackedAreaChart } from "./components/StackedAreaChart";
|
|
import { PercentAreaChart } from "./components/PercentAreaChart";
|
|
import { AreaChartFillByValue } from "./components/AreaChartFillByValue";
|
|
import { TwoLevelPieChart } from "./components/TwoLevelPieChart";
|
|
import { StraightAnglePieChart } from "./components/StraightAnglePieChart";
|
|
import { PieChartWithCustomizedLabel } from "./components/PieChartWithCustomizedLabel";
|
|
import { PieChartWithPaddingAngle } from "./components/PieChartWithPaddingAngle";
|
|
import { PieChartWithPaddingAngleHalf } from "./components/PieChartWithPaddingAngleHalf";
|
|
import { SpecifiedDomainRadarChart } from "./components/SpecifiedDomainRadarChart";
|
|
import { SimpleRadialBarChart } from './components/SimpleRadialBarChart';
|
|
import { LineBarAreaComposedChart } from "./components/LineBarAreaComposedChart";
|
|
import { TinyLineChart } from "./components/TinyLineChart";
|
|
import { TinyAreaChart } from "./components/TinyAreaChart";
|
|
import { TinyBarChart } from './components/TinyBarChart';
|
|
import { TinyPieChart } from './components/TinyPieChart';
|
|
import { TinyDonutChart } from './components/TinyDonutChart';
|
|
import { VerticalComposedChart } from './components/VerticalComposedChart';
|
|
|
|
export const ReCharts = () => (
|
|
<Container>
|
|
<HeaderMain
|
|
title="ReCharts"
|
|
className="mb-4 mt-4"
|
|
/>
|
|
<p>
|
|
Recharts is a Redefined chart library built with React and D3.
|
|
The main purpose of this library is to help you to write charts in React applications without any pain.
|
|
Main principles of Recharts are:
|
|
</p>
|
|
<ul className="mb-5">
|
|
<li><strong>Simply</strong> deploy with React components</li>
|
|
<li><strong>Native</strong> SVG support, lightweight depending only on some D3 submodules</li>
|
|
<li><strong>Declarative</strong> components, components of charts are purely presentational</li>
|
|
</ul>
|
|
|
|
{ /* START Header 1 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={1}
|
|
title="Bar Charts"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 1 */}
|
|
{ /* START Section 1 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
SimpleBarChart
|
|
<span className="small ml-1 text-muted">
|
|
#1.01
|
|
</span>
|
|
</h6>
|
|
<p>Bar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/30763kr7/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<SimpleBarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
StackedBarChart
|
|
<span className="small ml-1 text-muted">
|
|
#1.02
|
|
</span>
|
|
</h6>
|
|
<p>Bar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/90v76x08/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<StackedBarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
MixBarChart
|
|
<span className="small ml-1 text-muted">
|
|
#1.03
|
|
</span>
|
|
</h6>
|
|
<p>Bar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9hjfkp73/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<MixBarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
PositiveAndNegativeBarChart
|
|
<span className="small ml-1 text-muted">
|
|
#1.04
|
|
</span>
|
|
</h6>
|
|
<p>Bar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/q68cz43w/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<PositiveAndNegativeBarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
BarChartStackedBySign
|
|
<span className="small ml-1 text-muted">
|
|
#1.05
|
|
</span>
|
|
</h6>
|
|
<p>Bar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/p82xhe2a/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<BarChartStackedBySign />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
BarChartHasBackground
|
|
<span className="small ml-1 text-muted">
|
|
#1.06
|
|
</span>
|
|
</h6>
|
|
<p>Bar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/q4eonc12/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<BarChartHasBackground />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
{ /* START Section 1 */}
|
|
|
|
{ /* START Header 2 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={2}
|
|
title="Line Charts"
|
|
className="mt-5"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 2 */}
|
|
{ /* START Section 2 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
SimpleLineChart
|
|
<span className="small ml-1 text-muted">
|
|
#2.01
|
|
</span>
|
|
</h6>
|
|
<p>Line Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/xqjtetw0/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<SimpleLineChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
DashedLineChart
|
|
<span className="small ml-1 text-muted">
|
|
#2.02
|
|
</span>
|
|
</h6>
|
|
<p>Line Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/nptzh7ez/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<DashedLineChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
VerticalLineChart
|
|
<span className="small ml-1 text-muted">
|
|
#2.03
|
|
</span>
|
|
</h6>
|
|
<p>Line Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/rrr9q7x5/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<VerticalLineChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
CustomizedLabelLineChart
|
|
<span className="small ml-1 text-muted">
|
|
#2.04
|
|
</span>
|
|
</h6>
|
|
<p>Line Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9y9zrpjp/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<CustomizedLabelLineChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
{ /* START Section 2 */}
|
|
|
|
{ /* START Header 3 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={3}
|
|
title="Area Charts"
|
|
className="mt-5"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 3 */}
|
|
{ /* START Section 3 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
SimpleAreaChart
|
|
<span className="small ml-1 text-muted">
|
|
#3.01
|
|
</span>
|
|
</h6>
|
|
<p>Area Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/Lrffmzfc/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<SimpleAreaChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
StackedAreaChart
|
|
<span className="small ml-1 text-muted">
|
|
#3.02
|
|
</span>
|
|
</h6>
|
|
<p>Area Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/c1rLyqj1/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<StackedAreaChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
PercentAreaChart
|
|
<span className="small ml-1 text-muted">
|
|
#3.03
|
|
</span>
|
|
</h6>
|
|
<p>Area Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/zsax2hyq/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<PercentAreaChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
AreaChartFillByValue
|
|
<span className="small ml-1 text-muted">
|
|
#3.04
|
|
</span>
|
|
</h6>
|
|
<p>Area Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/64v6ocdx/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<AreaChartFillByValue />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
{ /* START Section 3 */}
|
|
|
|
{ /* START Header 4 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={4}
|
|
title="Pie Charts"
|
|
className="mt-5"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 4 */}
|
|
{ /* START Section 4 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
TwoLevelPieChart
|
|
<span className="small ml-1 text-muted">
|
|
#4.01
|
|
</span>
|
|
</h6>
|
|
<p>Pie Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/w6wsrc52/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<TwoLevelPieChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
StraightAnglePieChart
|
|
<span className="small ml-1 text-muted">
|
|
#4.02
|
|
</span>
|
|
</h6>
|
|
<p>Pie Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/pb1jwdt1/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<StraightAnglePieChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
PieChartWithPaddingAngle
|
|
<span className="small ml-1 text-muted">
|
|
#4.03
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/3Leoa7f4/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<PieChartWithPaddingAngle />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
PieChartWithPaddingAngleHalf
|
|
<span className="small ml-1 text-muted">
|
|
#4.04
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/3Leoa7f4/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<PieChartWithPaddingAngleHalf />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
PieChartWithCustomizedLabel
|
|
<span className="small ml-1 text-muted">
|
|
#4.05
|
|
</span>
|
|
</h6>
|
|
<p>Pie Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/c9pL8k61/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<PieChartWithCustomizedLabel />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
{ /* START Section 4 */}
|
|
|
|
{ /* START Header 5 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={5}
|
|
title="Radar Charts"
|
|
className="mt-5"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 5 */}
|
|
{ /* START Section 5 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
SpecifiedDomainRadarChart
|
|
<span className="small ml-1 text-muted">
|
|
#5.01
|
|
</span>
|
|
</h6>
|
|
<p>Radar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/dpgb3xjq/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<SpecifiedDomainRadarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
SimpleRadialBarChart
|
|
<span className="small ml-1 text-muted">
|
|
#5.02
|
|
</span>
|
|
</h6>
|
|
<p>Radar Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9km41z5z/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<SimpleRadialBarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
{ /* START Section 5 */}
|
|
|
|
{ /* START Header 6 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={6}
|
|
title="Composed Charts"
|
|
className="mt-5"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 6 */}
|
|
{ /* START Section 6 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
LineBarAreaComposedChart
|
|
<span className="small ml-1 text-muted">
|
|
#6.01
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9xopwa9v/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<LineBarAreaComposedChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex">
|
|
<div>
|
|
<h6 className="card-title mb-1">
|
|
VerticalComposedChart
|
|
<span className="small ml-1 text-muted">
|
|
#6.02
|
|
</span>
|
|
</h6>
|
|
<p>Composed Charts</p>
|
|
</div>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/shjsn5su/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<VerticalComposedChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
{ /* START Section 6 */}
|
|
|
|
{ /* START Header 7 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={7}
|
|
title="Tiny Charts"
|
|
className="mt-5"
|
|
subTitle={(
|
|
<React.Fragment>
|
|
Quickly build your charts with decoupled, reusable React components.
|
|
</React.Fragment>
|
|
)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 7 */}
|
|
{ /* START Section 7 */}
|
|
<CardDeck>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
TinyLineChart
|
|
<span className="small ml-1 text-muted">
|
|
#7.01
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/exh283uh/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<TinyLineChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
TinyAreaChart
|
|
<span className="small ml-1 text-muted">
|
|
#7.02
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/tv8zfzxo/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<TinyAreaChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
TinyBarChart
|
|
<span className="small ml-1 text-muted">
|
|
#7.03
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9kd8rssL/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<TinyBarChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</CardDeck>
|
|
<Row>
|
|
<Col lg={ 3 }>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
TinyDonutChart
|
|
<span className="small ml-1 text-muted">
|
|
#7.05
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9kd8rssL/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<TinyDonutChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</Col>
|
|
<Col lg={ 3 }>
|
|
{ /* START Card Graph */}
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<h6 className="card-title mb-1">
|
|
TinyPieChart
|
|
<span className="small ml-1 text-muted">
|
|
#7.06
|
|
</span>
|
|
</h6>
|
|
<span className="ml-auto">
|
|
<Button color="link" href="https://jsfiddle.net/alidingling/9kd8rssL/" target="_blank">
|
|
<i className="fa fa-external-link"></i>
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<TinyPieChart />
|
|
</CardBody>
|
|
</Card>
|
|
{ /* START Card Graph */}
|
|
</Col>
|
|
</Row>
|
|
{ /* START Section 7 */}
|
|
</Container>
|
|
);
|
|
|
|
export default ReCharts;
|