denicaturkusumaw
/
TIF_E41201756
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TIF_E41201756/static/assets/plugins/apexcharts/samples/react/sparklines/sparklines.html

411 lines
16 KiB
HTML
Raw Blame History

<!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>Sparklines</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
.row {
overflow: hidden;
max-width: 890px;
margin: 30px auto;
display: flex;
}
.col-md-4 {
width: 33.33%;
padding: 0 25px;
}
table {
width: 100%;
}
tbody tr {
border-top: 1px solid #e7e7e7;
}
th {
font-weight: bold;
font-family: Helvetica;
padding-bottom: 20px;
}
td,
th {
width: 25%;
text-align: center;
height: 65px;
}
td div {
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
@media only screen and (max-width: 480px) {
th:first-child,
td:first-child {
display: none;
}
.row {
display: block;
}
.col-md-4 {
padding: 0;
width: 100%;
}
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;sparklines&quot;&gt;&#10; &lt;div className=&quot;row&quot;&gt;&#10; &lt;div className=&quot;col-md-4&quot;&gt;&#10; &lt;div id=&quot;spark1&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsTopSpark1} series={this.state.seriesTopSpark1} type=&quot;area&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;div className=&quot;col-md-4&quot;&gt;&#10; &lt;div id=&quot;spark2&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsTopSpark2} series={this.state.seriesTopSpark2} type=&quot;area&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;div className=&quot;col-md-4&quot;&gt;&#10; &lt;div id=&quot;spark3&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsTopSpark3} series={this.state.seriesTopSpark3} type=&quot;area&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div className=&quot;row&quot;&gt;&#10; &lt;table&gt;&#10; &lt;thead&gt;&#10; &lt;th&gt;Total Value&lt;/th&gt;&#10; &lt;th&gt;Percentage of Portfolio&lt;/th&gt;&#10; &lt;th&gt;Last 10 days&lt;/th&gt;&#10; &lt;th&gt;Volume&lt;/th&gt;&#10; &lt;/thead&gt;&#10; &lt;tbody&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$32,554&lt;/td&gt;&#10; &lt;td&gt;15%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart1&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart5&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$23,533&lt;/td&gt;&#10; &lt;td&gt;7%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart2&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart6&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$54,276&lt;/td&gt;&#10; &lt;td&gt;9%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart3&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart7&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$11,533&lt;/td&gt;&#10; &lt;td&gt;2%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart4&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark4} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart8&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;/tbody&gt;&#10; &lt;/table&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">
window.Apex = {
stroke: {
width: 3
},
markers: {
size: 0
},
tooltip: {
fixed: {
enabled: true,
}
}
};
var randomizeArray = function (arg) {
var array = arg.slice();
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// data for the sparklines that appear below header area
var sparklineData = [47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46];
class SparklinesCharts extends React.Component {
constructor(props) {
super(props);
this.state = {
seriesTopSpark1: [{
data: randomizeArray(sparklineData)
}],
seriesTopSpark2: [{
data: randomizeArray(sparklineData)
}],
seriesTopSpark3: [{
data: randomizeArray(sparklineData)
}],
seriesSpark1: [{
data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54]
}],
seriesSpark2: [{
data: [47, 45, 74, 14, 56, 74, 14, 11, 7, 39, 82]
}],
seriesSpark3: [{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
seriesSpark4: [{
data: [15, 75, 47, 65, 14, 2, 41, 54, 4, 27, 15]
}],
chartOptionsTopSpark1: {
chart: {
sparkline: {
enabled: true
},
},
colors: ['#DCE6EC'],
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
title: {
text: '$135,965',
offsetX: 0,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Profits',
offsetX: 0,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
},
chartOptionsTopSpark2: {
chart: {
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3
},
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
title: {
text: '$235,312',
offsetX: 0,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Expenses',
offsetX: 0,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
},
chartOptionsTopSpark3: {
chart: {
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
title: {
text: '$424,652',
offsetX: 0,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Sales',
offsetX: 0,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
},
chartOptionsSparkLine: {
chart: {
height: 35,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '80%'
}
},
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
}
}
}
render() {
return (
<div>
<div id="sparklines">
<div className="row">
<div className="col-md-4">
<div id="spark1">
<ReactApexChart options={this.state.chartOptionsTopSpark1} series={this.state.seriesTopSpark1} type="area" height="160" />
</div>
</div>
<div className="col-md-4">
<div id="spark2">
<ReactApexChart options={this.state.chartOptionsTopSpark2} series={this.state.seriesTopSpark2} type="area" height="160" />
</div>
</div>
<div className="col-md-4">
<div id="spark3">
<ReactApexChart options={this.state.chartOptionsTopSpark3} series={this.state.seriesTopSpark3} type="area" height="160" />
</div>
</div>
</div>
<div className="row">
<table>
<thead>
<th>Total Value</th>
<th>Percentage of Portfolio</th>
<th>Last 10 days</th>
<th>Volume</th>
</thead>
<tbody>
<tr>
<td>$32,554</td>
<td>15%</td>
<td>
<div id="chart1">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart5">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type="bar" height="35" width="100" />
</div>
</td>
</tr>
<tr>
<td>$23,533</td>
<td>7%</td>
<td>
<div id="chart2">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart6">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type="bar" height="35" width="100" />
</div>
</td>
</tr>
<tr>
<td>$54,276</td>
<td>9%</td>
<td>
<div id="chart3">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart7">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type="bar" height="35" width="100" />
</div>
</td>
</tr>
<tr>
<td>$11,533</td>
<td>2%</td>
<td>
<div id="chart4">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark4} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart8">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type="bar" height="35" width="100" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(SparklinesCharts), domContainer);
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink