Skip to content
GitLab
Commit 27ca663e authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Added Viewer

parent e21f1f45
Hide whitespace changes
Inline Side-by-side
Showing
with 3446 additions and 0 deletions
+3446 -0
public/ThirdParty/apexcharts-bundle/samples/react/bar/stacked-bar-100.html 0 → 100644
+ 119
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Bar Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: '100% Stacked Bar'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
},
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/bar/stacked-bar.html 0 → 100644
+ 133
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Bar Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
},
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/bubble/3d-bubble.html 0 → 100644
+ 136
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3d Bubble Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bubble&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
//var x =Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
series.push([baseval, y, z]);
baseval += 86400000;
i++;
}
return series;
}
class BubbleChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
},
title: {
text: '3D Bubble Chart'
},
xaxis: {
tickAmount: 12,
type: 'datetime',
labels: {
rotate: 0,
}
},
yaxis: {
max: 70
},
theme: {
palette: 'palette2'
}
},
series: [
{
name: 'Product1',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Product2',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Product3',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Product4',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}
]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bubble" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BubbleChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/bubble/simple-bubble.html 0 → 100644
+ 130
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Bubble</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bubble&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
series.push([x, y, z]);
baseval += 86400000;
i++;
}
return series;
}
class BubbleChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
fill: {
opacity: 0.8,
},
title: {
text: 'Simple Bubble Chart'
},
xaxis: {
tickAmount: 12,
type: 'category',
},
yaxis: {
max: 70
}
},
series: [
{
name: 'Bubble1',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble2',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble3',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble4',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}
]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bubble" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BubbleChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/candlestick/basic.html 0 → 100644
+ 323
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CandleStick Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;candlestick&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class CandleStickChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
title: {
text: 'CandleStick Chart',
align: 'left'
},
xaxis: {
type: 'datetime'
},
yaxis: {
tooltip: {
enabled: true
}
}
},
series: [{
data: [{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11]
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65]
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24]
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47]
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31]
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02]
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02]
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01]
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02]
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91]
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612]
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612]
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95]
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67]
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4]
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9]
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45]
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35]
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53]
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19]
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620]
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620]
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61]
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58]
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86]
},
{
x: new Date(1538825400000),
y: [6598.86, 6598.88, 6570, 6587.16]
},
{
x: new Date(1538827200000),
y: [6588.86, 6600, 6580, 6593.4]
},
{
x: new Date(1538829000000),
y: [6593.99, 6598.89, 6585, 6587.81]
},
{
x: new Date(1538830800000),
y: [6587.81, 6592.73, 6567.14, 6578]
},
{
x: new Date(1538832600000),
y: [6578.35, 6581.72, 6567.39, 6579]
},
{
x: new Date(1538834400000),
y: [6579.38, 6580.92, 6566.77, 6575.96]
},
{
x: new Date(1538836200000),
y: [6575.96, 6589, 6571.77, 6588.92]
},
{
x: new Date(1538838000000),
y: [6588.92, 6594, 6577.55, 6589.22]
},
{
x: new Date(1538839800000),
y: [6589.3, 6598.89, 6589.1, 6596.08]
},
{
x: new Date(1538841600000),
y: [6597.5, 6600, 6588.39, 6596.25]
},
{
x: new Date(1538843400000),
y: [6598.03, 6600, 6588.73, 6595.97]
},
{
x: new Date(1538845200000),
y: [6595.97, 6602.01, 6588.17, 6602]
},
{
x: new Date(1538847000000),
y: [6602, 6607, 6596.51, 6599.95]
},
{
x: new Date(1538848800000),
y: [6600.63, 6601.21, 6590.39, 6591.02]
},
{
x: new Date(1538850600000),
y: [6591.02, 6603.08, 6591, 6591]
},
{
x: new Date(1538852400000),
y: [6591, 6601.32, 6585, 6592]
},
{
x: new Date(1538854200000),
y: [6593.13, 6596.01, 6590, 6593.34]
},
{
x: new Date(1538856000000),
y: [6593.34, 6604.76, 6582.63, 6593.86]
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6604.2, 6590, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6595, 6583.27, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6598.21, 6587.6, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6605, 6596.61, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.99, 6597.5, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6606]
},
]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="candlestick" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(CandleStickChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/candlestick/candlestick-bar.html 0 → 100644
+ 170
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CandleStick Chart with Bar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart-box {
max-width: 650px;
margin: 35px auto;
}
#chart-candlestick,
#chart-bar {
max-width: 640px;
}
#chart-bar {
margin-top: -50px;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart-box&quot;&gt;&#10; &lt;div id=&quot;chart-candlestick&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsCandlestick} series={this.state.seriesCandle} type=&quot;candlestick&quot; height=&quot;290&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;div id=&quot;chart-bar&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsBar} series={this.state.seriesBar} type=&quot;bar&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="../../assets/ohlc.js"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class CandleStickChart extends React.Component {
constructor(props) {
super(props);
this.state = {
seriesCandle: [{
data: seriesData
}],
seriesBar: [{
name: 'volume',
data: seriesDataLinear
}],
chartOptionsCandlestick: {
chart: {
id: 'candles',
toolbar: {
autoSelected: 'pan',
show: false
},
zoom: {
enabled: false
},
},
plotOptions: {
candlestick: {
colors: {
upward: '#3C90EB',
downward: '#DF7D46'
}
}
},
xaxis: {
type: 'datetime'
}
},
chartOptionsBar: {
chart: {
height: 160,
type: 'bar',
brush: {
enabled: true,
target: 'candles'
},
selection: {
enabled: true,
xaxis: {
min: new Date('20 Jan 2017').getTime(),
max: new Date('10 Dec 2017').getTime()
},
fill: {
color: '#ccc',
opacity: 0.4
},
stroke: {
color: '#0D47A1',
}
},
},
dataLabels: {
enabled: false
},
plotOptions: {
bar: {
columnWidth: '80%',
colors: {
ranges: [{
from: -1000,
to: 0,
color: '#F15B46'
}, {
from: 1,
to: 10000,
color: '#FEB019'
}],
},
}
},
stroke: {
width: 0
},
xaxis: {
type: 'datetime',
axisBorder: {
offsetX: 13
}
},
yaxis: {
labels: {
show: false
}
}
}
}
}
render() {
return (
<div>
<div id="chart-box">
<div id="chart-candlestick">
<ReactApexChart options={this.state.chartOptionsCandlestick} series={this.state.seriesCandle} type="candlestick" height="290" />
</div>
<div id="chart-bar">
<ReactApexChart options={this.state.chartOptionsBar} series={this.state.seriesBar} type="bar" height="160" />
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(CandleStickChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/basic-column.html 0 → 100644
+ 111
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Column - Grouped</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
columnWidth: '55%',
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
},
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
name: 'Free Cash Flow',
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/column-with-data-labels.html 0 → 100644
+ 154
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Column with Data Labels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
bar: {
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
labels: {
offsetY: -18,
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
offsetY: -35,
}
},
fill: {
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [50, 0, 100, 100]
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 320,
align: 'center',
style: {
color: '#444'
}
}
},
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/column-with-negative.html 0 → 100644
+ 118
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Bar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
bar: {
colors: {
ranges: [{
from: -100,
to: -46,
color: '#F15B46'
}, {
from: -45,
to: 0,
color: '#FEB019'
}]
},
columnWidth: '80%',
}
},
dataLabels: {
enabled: false,
},
yaxis: {
title: {
text: 'Growth',
},
labels: {
formatter: function (y) {
return y.toFixed(0) + "%";
}
}
},
xaxis: {
type: 'datetime',
categories: [
'2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
'2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
'2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
'2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
'2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
'2013-07-01', '2013-08-01', '2013-09-01'
],
labels: {
rotate: -90
}
}
},
series: [{
name: 'Cash Flow',
data: [1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/column-with-rotated-labels.html 0 → 100644
+ 136
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Column with Rotates Labels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
annotations: {
points: [{
x: 'Bananas',
seriesIndex: 0,
label: {
borderColor: '#775DD0',
offsetY: 0,
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Bananas are good',
}
}]
},
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
columnWidth: '50%',
endingShape: 'rounded'
}
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: ['Apples', 'Oranges', 'Strawberries', 'Pineapples', 'Mangoes', 'Bananas',
'Blackberries', 'Pears', 'Watermelons', 'Cherries', 'Pomegranates', 'Tangerines', 'Papayas'
],
},
yaxis: {
title: {
text: 'Servings',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
}
},
series: [{
name: 'Servings',
data: [44, 55, 41, 67, 22, 43, 21, 33, 45, 31, 87, 65, 35]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/data.js 0 → 100644
+ 146
- 0
View file @ 27ca663e
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
var arrayData = [{
y: 400,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 90
}, {
x: 'Q3',
y: 100
}, {
x: 'Q4',
y: 90
}]
}, {
y: 430,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 110
}, {
x: 'Q3',
y: 90
}, {
x: 'Q4',
y: 110
}]
}, {
y: 448,
quarters: [{
x: 'Q1',
y: 70
}, {
x: 'Q2',
y: 100
}, {
x: 'Q3',
y: 140
}, {
x: 'Q4',
y: 138
}]
}, {
y: 470,
quarters: [{
x: 'Q1',
y: 150
}, {
x: 'Q2',
y: 60
}, {
x: 'Q3',
y: 190
}, {
x: 'Q4',
y: 70
}]
}, {
y: 540,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 120
}, {
x: 'Q3',
y: 130
}, {
x: 'Q4',
y: 170
}]
}, {
y: 580,
quarters: [{
x: 'Q1',
y: 170
}, {
x: 'Q2',
y: 130
}, {
x: 'Q3',
y: 120
}, {
x: 'Q4',
y: 160
}]
}];
function makeData() {
var dataSet = shuffleArray(arrayData)
var dataYearSeries = [{
x: "2011",
y: dataSet[0].y,
color: colors[0],
quarters: dataSet[0].quarters
}, {
x: "2012",
y: dataSet[1].y,
color: colors[1],
quarters: dataSet[1].quarters
}, {
x: "2013",
y: dataSet[2].y,
color: colors[2],
quarters: dataSet[2].quarters
}, {
x: "2014",
y: dataSet[3].y,
color: colors[3],
quarters: dataSet[3].quarters
}, {
x: "2015",
y: dataSet[4].y,
color: colors[4],
quarters: dataSet[4].quarters
}, {
x: "2016",
y: dataSet[5].y,
color: colors[5],
quarters: dataSet[5].quarters
}];
return dataYearSeries
}
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/distributed-columns.html 0 → 100644
+ 101
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Distributed Bar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
#chart .apexcharts-xaxis-label {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&#60;div id=&#34;chart&#34;&#62;&#10; &#60;ReactApexChart options={this.state.options} series={this.state.series} type=&#34;bar&#34; height=&#34;350&#34; /&#62;&#10; &#60;/div&#62;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#546E7A', '#26a69a', '#D10CE8'];
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
events: {
click: function (chart, w, e) {
console.log(chart, w, e)
}
},
},
colors: colors,
plotOptions: {
bar: {
columnWidth: '45%',
distributed: true
}
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ['John', 'Joe', 'Jake', 'Amber', 'Peter', 'Mary', 'David', 'Lily'],
labels: {
style: {
colors: colors,
fontSize: '14px'
}
}
}
},
series: [{
data: [21, 22, 10, 28, 16, 21, 13, 30]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/dynamic-loaded-chart.html 0 → 100644
+ 527
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic Loaded Column Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
body {
background: #fff;
}
.wrap {
margin: 45px auto;
max-width: 800px;
position: relative;
}
.chart-box {
padding-left: 0;
}
#chart-year,
#chart-quarter {
width: 96%;
max-width: 48%;
box-shadow: none;
}
#chart-year {
float: left;
position: relative;
transition: 1s ease transform;
z-index: 3;
}
#chart-year.chart-quarter-activated {
transform: translateX(0);
transition: 1s ease transform;
}
#chart-quarter {
float: left;
position: relative;
z-index: -2;
transition: 1s ease transform;
}
#chart-quarter.active {
transition: 1.1s ease-in-out transform;
transform: translateX(0);
z-index: 1;
}
@media screen and (min-width: 480px) {
#chart-year {
transform: translateX(50%);
}
#chart-quarter {
transform: translateX(-50%);
}
}
select#model {
display: none;
position: absolute;
top: -40px;
left: 0;
z-index: 2;
cursor: pointer;
transform: scale(0.8);
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div class=&quot;wrap&quot;&gt;&#10; &lt;select id=&quot;model&quot; onChange={() =&gt; this.changeData()} class=&quot;flat-select&quot;&gt;&#10; &lt;option value=&quot;iphone5&quot;&gt;iPhone 5&lt;/option&gt;&#10; &lt;option value=&quot;iphone6&quot;&gt;iPhone 6&lt;/option&gt;&#10; &lt;option value=&quot;iphone7&quot;&gt;iPhone 7&lt;/option&gt;&#10; &lt;/select&gt;&#10; &lt;div id=&quot;chart-year&quot; class=&quot;chart-box&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsYear} series={this.state.seriesYear} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;div id=&quot;chart-quarter&quot; class=&quot;chart-box&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsQuarter} series={this.state.seriesQuarter} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
Apex = {
chart: {
toolbar: {
show: false
}
},
tooltip: {
shared: false
},
}
var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
var arrayData = [{
y: 400,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 90
}, {
x: 'Q3',
y: 100
}, {
x: 'Q4',
y: 90
}]
}, {
y: 430,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 110
}, {
x: 'Q3',
y: 90
}, {
x: 'Q4',
y: 110
}]
}, {
y: 448,
quarters: [{
x: 'Q1',
y: 70
}, {
x: 'Q2',
y: 100
}, {
x: 'Q3',
y: 140
}, {
x: 'Q4',
y: 138
}]
}, {
y: 470,
quarters: [{
x: 'Q1',
y: 150
}, {
x: 'Q2',
y: 60
}, {
x: 'Q3',
y: 190
}, {
x: 'Q4',
y: 70
}]
}, {
y: 540,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 120
}, {
x: 'Q3',
y: 130
}, {
x: 'Q4',
y: 170
}]
}, {
y: 580,
quarters: [{
x: 'Q1',
y: 170
}, {
x: 'Q2',
y: 130
}, {
x: 'Q3',
y: 120
}, {
x: 'Q4',
y: 160
}]
}];
function makeData() {
var dataSet = shuffleArray(arrayData)
var dataYearSeries = [{
x: "2011",
y: dataSet[0].y,
color: colors[0],
quarters: dataSet[0].quarters
}, {
x: "2012",
y: dataSet[1].y,
color: colors[1],
quarters: dataSet[1].quarters
}, {
x: "2013",
y: dataSet[2].y,
color: colors[2],
quarters: dataSet[2].quarters
}, {
x: "2014",
y: dataSet[3].y,
color: colors[3],
quarters: dataSet[3].quarters
}, {
x: "2015",
y: dataSet[4].y,
color: colors[4],
quarters: dataSet[4].quarters
}, {
x: "2016",
y: dataSet[5].y,
color: colors[5],
quarters: dataSet[5].quarters
}];
return dataYearSeries
}
function updateQuarterChart(sourceChart, destChartIDToUpdate) {
var series = [];
var seriesIndex = 0;
var colors = []
if (sourceChart.w.globals.selectedDataPoints[0]) {
var selectedPoints = sourceChart.w.globals.selectedDataPoints;
for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
var selectedIndex = selectedPoints[seriesIndex][i];
var yearSeries = sourceChart.w.config.series[seriesIndex];
series.push({
name: yearSeries.data[selectedIndex].x,
data: yearSeries.data[selectedIndex].quarters
})
colors.push(yearSeries.data[selectedIndex].color)
}
if (series.length === 0) series = [{
data: []
}]
return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
series: series,
colors: colors,
fill: {
colors: colors
}
})
}
}
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
seriesQuarter: [{
data: []
}],
seriesYear: [{
data: makeData()
}],
chartOptionsYear: {
chart: {
id: 'barYear',
height: 400,
width: '100%',
type: 'bar',
events: {
dataPointSelection: function (e, chart, opts) {
var quarterChartEl = document.querySelector("#chart-quarter");
var yearChartEl = document.querySelector("#chart-year");
if (opts.selectedDataPoints[0].length === 1) {
if (quarterChartEl.classList.contains("active")) {
updateQuarterChart(chart, 'barQuarter')
} else {
yearChartEl.classList.add("chart-quarter-activated")
quarterChartEl.classList.add("active");
updateQuarterChart(chart, 'barQuarter')
}
} else {
updateQuarterChart(chart, 'barQuarter')
}
if (opts.selectedDataPoints[0].length === 0) {
yearChartEl.classList.remove("chart-quarter-activated")
quarterChartEl.classList.remove("active");
}
},
updated: function (chart) {
updateQuarterChart(chart, 'barQuarter')
}
}
},
plotOptions: {
bar: {
distributed: true,
horizontal: true,
endingShape: 'arrow',
barHeight: '75%',
dataLabels: {
position: 'bottom'
}
}
},
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex]
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
colors: colors,
states: {
normal: {
filter: {
type: 'desaturate'
}
},
active: {
allowMultipleDataPointsSelection: true,
filter: {
type: 'darken',
value: 1
}
}
},
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function (val, opts) {
return opts.w.globals.labels[opts.dataPointIndex]
}
}
}
},
title: {
text: 'Yearly Results',
offsetX: 15
},
subtitle: {
text: '(Click on bar to see details)',
offsetX: 15
},
yaxis: {
labels: {
show: false
}
}
},
chartOptionsQuarter: {
chart: {
id: 'barQuarter',
height: 400,
width: '100%',
type: 'bar',
stacked: true
},
plotOptions: {
bar: {
columnWidth: '50%',
horizontal: false
}
},
legend: {
show: false
},
grid: {
yaxis: {
lines: {
show: false,
}
},
xaxis: {
lines: {
show: true,
}
}
},
yaxis: {
labels: {
show: false
}
},
title: {
text: 'Quarterly Results',
offsetX: 10
},
tooltip: {
x: {
formatter: function (val, opts) {
return opts.w.globals.seriesNames[opts.seriesIndex]
}
},
y: {
title: {
formatter: function (val, opts) {
return opts.w.globals.labels[opts.dataPointIndex]
}
}
}
}
},
options: {
chart: {
events: {
click: function (chart, w, e) {
console.log(chart, w, e)
}
},
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#546E7A', '#26a69a', '#D10CE8'],
plotOptions: {
bar: {
columnWidth: '45%',
distributed: true
}
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ['John', 'Joe', 'Jake', 'Amber', 'Peter', 'Mary', 'David', 'Lily'],
labels: {
style: {
colors: colors,
fontSize: '14px'
}
}
}
},
series: [{
data: [21, 22, 10, 28, 16, 21, 13, 30]
}],
}
}
changeData() {
Apex.exec('barYear', 'updateSeries', [{
data: makeData()
}])
}
render() {
return (
<div>
<div class="wrap">
<select id="model" onChange={() => this.changeData()} class="flat-select">
<option value="iphone5">iPhone 5</option>
<option value="iphone6">iPhone 6</option>
<option value="iphone7">iPhone 7</option>
</select>
<div id="chart-year" class="chart-box">
<ReactApexChart options={this.state.chartOptionsYear} series={this.state.seriesYear} type="bar" height="350" />
</div>
<div id="chart-quarter" class="chart-box">
<ReactApexChart options={this.state.chartOptionsQuarter} series={this.state.seriesQuarter} type="bar" height="350" />
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/stacked-column-100.html 0 → 100644
+ 105
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Column</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2',
'2012 Q3', '2012 Q4'
],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
}
},
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43, 21, 49]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27, 33, 12]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14, 15, 13]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/column/stacked-column.html 0 → 100644
+ 120
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Column</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;bar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
},
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(BarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/heatmap/basic.html 0 → 100644
+ 157
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HeatMap</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;heatmap&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
class HeatmapChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
colors: ["#008FFB"],
title: {
text: 'HeatMap Chart (Single color)'
}
},
series: [
{
name: 'Metric1',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric9',
data: generateData(18, {
min: 0,
max: 90
})
}
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="heatmap" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(HeatmapChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/heatmap/color-range.html 0 → 100644
+ 189
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Range HeatMap</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;heatmap&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
class HeatmapChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
heatmap: {
shadeIntensity: 0.5,
colorScale: {
ranges: [{
from: -30,
to: 5,
name: 'low',
color: '#00A100'
},
{
from: 6,
to: 20,
name: 'medium',
color: '#128FD9'
},
{
from: 21,
to: 45,
name: 'high',
color: '#FFB200'
},
{
from: 46,
to: 55,
name: 'extreme',
color: '#FF0000'
}
]
}
}
},
dataLabels: {
enabled: false
},
title: {
text: 'HeatMap Chart with Color Range'
}
},
series: [
{
name: 'Jan',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Feb',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Mar',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Apr',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'May',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Jun',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Jul',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Aug',
data: generateData(20, {
min: -30,
max: 55
})
},
{
name: 'Sep',
data: generateData(20, {
min: -30,
max: 55
})
}
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="heatmap" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(HeatmapChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/heatmap/multiple-color-scales-flipped.html 0 → 100644
+ 168
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HeatMap</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;heatmap&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push(y);
i++;
}
return series;
}
var data = [{
name: '10:00',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '10:30',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '11:00',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '11:30',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '12:00',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '12:30',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '13:00',
data: generateData(15, {
min: 0,
max: 90
})
},
{
name: '13:30',
data: generateData(15, {
min: 0,
max: 90
})
}
]
data.reverse()
class HeatmapChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
plotOptions: {
heatmap: {
colorScale: {
inverse: true
}
}
},
colors: ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8",
'#A9D794',
'#46AF78', '#A93F55', '#8C5E58', '#2176FF', '#33A1FD', '#7A918D', '#BAFF29'
],
xaxis: {
type: 'category',
categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12',
'W13',
'W14', 'W15'
]
},
title: {
text: 'Color Scales flipped Vertically'
}
},
series: data,
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="heatmap" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(HeatmapChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/heatmap/multiple-color.html 0 → 100644
+ 218
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HeatMap</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 500px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;heatmap&quot; height=&quot;450&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var data = [{
name: 'W1',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W2',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W3',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W4',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W5',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W6',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W7',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W8',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W9',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W10',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W11',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W12',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W13',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W14',
data: generateData(8, {
min: 0,
max: 90
})
},
{
name: 'W15',
data: generateData(8, {
min: 0,
max: 90
})
}
]
data.reverse()
var colors = ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8", '#A9D794', '#46AF78',
'#A93F55', '#8C5E58', '#2176FF', '#33A1FD', '#7A918D', '#BAFF29'
]
colors.reverse()
class HeatmapChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
colors: colors,
xaxis: {
type: 'category',
categories: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '01:00', '01:30']
},
title: {
text: 'HeatMap Chart (Different color shades for each series)'
},
grid: {
padding: {
right: 20
}
}
},
series: data,
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="heatmap" height="450" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(HeatmapChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/heatmap/rounded.html 0 → 100644
+ 185
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HeatMap</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;heatmap&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
class HeatmapChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
stroke: {
width: 0
},
plotOptions: {
heatmap: {
radius: 30,
enableShades: false,
colorScale: {
ranges: [{
from: 0,
to: 50,
color: '#008FFB'
},
{
from: 51,
to: 100,
color: '#00E396'
},
],
},
}
},
dataLabels: {
enabled: true,
style: {
colors: ['#fff']
}
},
xaxis: {
type: 'category',
},
title: {
text: 'Rounded (Range without Shades)'
}
},
series: [
{
name: 'Metric1',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(20, {
min: 0,
max: 90
})
}
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="heatmap" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(HeatmapChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal