stories/feat.bigdata.stories.js (1,420 lines of code) (raw):
import React, { useState, useEffect } from 'react';
import { storiesOf } from '@storybook/react';
import { Wcontainer, Wline, Wbar, Wpie, Wscatter, Util } from '@alicloud/cloud-charts';
const { fillMissingTimestamps } = Util;
function generateData(number) {
const random = (seed) => {
return '0.' + Math.sin(seed).toString().substr(6);
};
const res = [
{
name: '平均值',
data: [],
},
{
name: '范围',
data: [],
},
];
const now = Date.now();
for (let i = 0; i < number; i++) {
const t = now - (3000 - i) * 1000;
const value = +random(t);
res[0].data.push([t, value]);
let value2 = value - 0.4 < 0 ? null : value - 0.4
// 模拟断点
if (value - 0.4 > 0) {
res[1].data.push([t, value2, value + 0.4]);
}
}
return res;
}
const stories = storiesOf('bigdata', module);
const lineData = generateData(400);
const testData = [
{
"name": "范围",
"data": [
[
1743494408703,
0.2796927428839999,
1.079692742884
],
[
1743494409703,
0.550265064587,
1.350265064587
],
[
1743494410703,
0.29218368511679993,
1.0921836851168
],
[
1743494411703,
0.09464996046039997,
0.8946499604604
],
[
1743494413703,
0.11990990199124996,
0.91990990199125
],
[
1743494414703,
0.42369683926299995,
1.2236968392629999
],
[
1743494415703,
0.012416988047999955,
0.812416988048
],
[
1743494420703,
0.0941788739105,
0.8941788739105001
],
[
1743494422703,
0.17598425913100002,
0.9759842591310001
],
[
1743494423703,
0.18236268659370003,
0.9823626865937001
],
[
1743494424703,
0.060573850743099955,
0.8605738507431
],
[
1743494425703,
0.0123876282266,
0.8123876282266
],
[
1743494427703,
0.525740577742,
1.3257405777420002
],
[
1743494429703,
0.38965350210069993,
1.1896535021007
],
[
1743494430703,
0.09364036699095996,
0.8936403669909601
],
[
1743494431703,
0.5030203606636999,
1.3030203606636999
],
[
1743494432703,
0.5078520486229999,
1.3078520486229999
],
[
1743494434703,
0.21391265584599994,
1.013912655846
],
[
1743494435703,
0.208258639526,
1.008258639526
],
[
1743494439703,
0.022856257518659995,
0.82285625751866
],
[
1743494440703,
0.43040094863699996,
1.230400948637
],
[
1743494441703,
0.211802048638,
1.0118020486380002
],
[
1743494442703,
0.3235965408365,
1.1235965408365
],
[
1743494444703,
0.21557961884029997,
1.0155796188403001
],
[
1743494448703,
0.497721076603,
1.297721076603
],
[
1743494449703,
0.08570391629933999,
0.8857039162993401
],
[
1743494451703,
0.08300981979459998,
0.8830098197946
],
[
1743494456703,
0.16046685216509993,
0.9604668521651
],
[
1743494458703,
0.02897472779889998,
0.8289747277989
],
[
1743494459703,
0.4748256493537,
1.2748256493537
],
[
1743494461703,
0.42243872306999997,
1.22243872307
],
[
1743494464703,
0.28718691583409994,
1.0871869158341
],
[
1743494465703,
0.31482135828095503,
1.1148213582809552
],
[
1743494466703,
0.49957493188899993,
1.299574931889
],
[
1743494471703,
0.09879765159709997,
0.8987976515971
],
[
1743494473703,
0.06578189004199997,
0.865781890042
],
[
1743494476703,
0.27382996850419994,
1.0738299685041999
],
[
1743494478703,
0.03074891123689999,
0.8307489112369
],
[
1743494479703,
0.2448940596,
1.0448940596
],
[
1743494480703,
0.19092237703299997,
0.990922377033
],
[
1743494482703,
0.24971396605359997,
1.0497139660536
],
[
1743494483703,
0.32557534791239995,
1.1255753479124
],
[
1743494484703,
0.5303397412751499,
1.33033974127515
],
[
1743494485703,
0.53893531541,
1.33893531541
],
[
1743494486703,
0.48423842549499996,
1.284238425495
],
[
1743494487703,
0.11238672396999994,
0.91238672397
],
[
1743494488703,
0.58025092119335,
1.38025092119335
],
[
1743494489703,
0.21623512205359996,
1.0162351220536001
],
[
1743494492703,
0.03000813956599996,
0.830008139566
],
[
1743494493703,
0.02421577775099998,
0.824215777751
],
[
1743494494703,
0.056602928585099965,
0.8566029285851
],
[
1743494496703,
0.21486194860489993,
1.0148619486049
],
[
1743494498703,
0.441140821133,
1.241140821133
],
[
1743494501703,
0.5010275519301,
1.3010275519301
],
[
1743494502703,
0.3395951376023,
1.1395951376023001
],
[
1743494503703,
0.04140916428959995,
0.8414091642896
],
[
1743494504703,
0.3991250448285,
1.1991250448285
],
[
1743494505703,
0.463042738002,
1.263042738002
],
[
1743494506703,
0.505962693376,
1.305962693376
],
[
1743494508703,
0.06698565578139998,
0.8669856557814
],
[
1743494509703,
0.4535909440154,
1.2535909440154
],
[
1743494510703,
0.12011439752590003,
0.9201143975259001
],
[
1743494513703,
0.42041363540949994,
1.2204136354094999
],
[
1743494515703,
0.5145572758929999,
1.314557275893
],
[
1743494519703,
0.5233034715939999,
1.323303471594
],
[
1743494520703,
0.08093057169206996,
0.88093057169207
],
[
1743494522703,
0.2885505137569,
1.0885505137569
],
[
1743494524703,
0.15442304598400003,
0.9544230459840001
],
[
1743494525703,
0.174120108371,
0.974120108371
],
[
1743494527703,
0.006080398807700005,
0.8060803988077001
],
[
1743494532703,
0.488579178152,
1.2885791781520002
],
[
1743494533703,
0.59732344119772,
1.39732344119772
],
[
1743494534703,
0.0632034950184,
0.8632034950184
],
[
1743494535703,
0.02592699360339995,
0.8259269936033999
],
[
1743494536703,
0.28795137924107395,
1.087951379241074
],
[
1743494539703,
0.297840663955,
1.097840663955
],
[
1743494540703,
0.3668556624597,
1.1668556624597
],
[
1743494543703,
0.5763637287533,
1.3763637287533
],
[
1743494544703,
0.568294172633,
1.368294172633
],
[
1743494545703,
0.303932746816,
1.103932746816
],
[
1743494546703,
0.53326760839016,
1.33326760839016
],
[
1743494547703,
0.12665080629640002,
0.9266508062964001
],
[
1743494548703,
0.0288484370539,
0.8288484370539
],
[
1743494549703,
0.1963394893182,
0.9963394893182
],
[
1743494551703,
0.502289184542,
1.302289184542
],
[
1743494552703,
0.257581386905,
1.057581386905
],
[
1743494553703,
0.3783663098758,
1.1783663098758002
],
[
1743494554703,
0.014683375844399993,
0.8146833758444001
],
[
1743494556703,
0.4512134054529999,
1.251213405453
],
[
1743494557703,
0.59259235559,
1.3925923555900002
],
[
1743494558703,
0.32198060016499996,
1.1219806001650001
],
[
1743494559703,
0.19130283501169998,
0.9913028350117
],
[
1743494560703,
0.5482708942978,
1.3482708942978001
],
[
1743494562703,
0.30825077092819997,
1.1082507709282
],
[
1743494564703,
0.558246926916,
1.358246926916
],
[
1743494566703,
0.5270677549232999,
1.3270677549232999
],
[
1743494567703,
0.38267506605509993,
1.1826750660551
],
[
1743494568703,
0.19825551136139996,
0.9982555113614
],
[
1743494569703,
0.127414269495,
0.927414269495
],
[
1743494570703,
0.39003750494299994,
1.190037504943
],
[
1743494571703,
0.30287026067699996,
1.102870260677
],
[
1743494573703,
0.14015933256879998,
0.9401593325688
],
[
1743494574703,
0.5506339782508,
1.3506339782508001
],
[
1743494576703,
0.37164114842099993,
1.171641148421
],
[
1743494577703,
0.507077245808,
1.307077245808
],
[
1743494579703,
0.34645091953630003,
1.1464509195363002
],
[
1743494580703,
0.11480822064779994,
0.9148082206478
],
[
1743494581703,
0.21008419854677995,
1.0100841985467799
],
[
1743494583703,
0.29118499681800003,
1.091184996818
],
[
1743494584703,
0.36806846561999995,
1.16806846562
],
[
1743494587703,
0.05210297499659999,
0.8521029749966
],
[
1743494589703,
0.4975174855219999,
1.297517485522
],
[
1743494590703,
0.272286679203,
1.0722866792030001
],
[
1743494591703,
0.07221425209728999,
0.87221425209729
],
[
1743494592703,
0.4207848920121,
1.2207848920121
],
[
1743494593703,
0.46193528125329997,
1.2619352812533
],
[
1743494595703,
0.29392467368999997,
1.0939246736900001
],
[
1743494596703,
0.267573535168,
1.067573535168
],
[
1743494599703,
0.39820470161769994,
1.1982047016177
],
[
1743494602703,
0.125018569084,
0.925018569084
],
[
1743494603703,
0.300329829766,
1.100329829766
],
[
1743494604703,
0.50443656798793,
1.30443656798793
],
[
1743494605703,
0.3884522077578,
1.1884522077578001
],
[
1743494607703,
0.260256757341525,
1.060256757341525
],
[
1743494608703,
0.553967013269,
1.353967013269
],
[
1743494612703,
0.0061325753484000045,
0.8061325753484001
],
[
1743494613703,
0.31954652842915,
1.11954652842915
],
[
1743494614703,
0.1371331035465,
0.9371331035465
],
[
1743494616703,
0.524936832424,
1.324936832424
],
[
1743494617703,
0.3088192367922,
1.1088192367922
],
[
1743494619703,
0.29833116866519993,
1.0983311686652
],
[
1743494620703,
0.33762848158659997,
1.1376284815866
],
[
1743494621703,
0.23690041415599994,
1.0369004141559999
],
[
1743494622703,
0.485299196268,
1.285299196268
],
[
1743494624703,
0.4804569270922999,
1.2804569270922999
],
[
1743494626703,
0.3108472287423599,
1.1108472287423599
],
[
1743494627703,
0.15871693926099995,
0.958716939261
],
[
1743494628703,
0.337474839973,
1.1374748399730001
],
[
1743494629703,
0.3275315608,
1.1275315608
],
[
1743494632703,
0.5751362828891999,
1.3751362828892
],
[
1743494634703,
0.470308731824,
1.270308731824
],
[
1743494637703,
0.2173693930149,
1.0173693930149001
],
[
1743494638703,
0.5158935753876,
1.3158935753876
],
[
1743494639703,
0.40827617255359994,
1.2082761725536
],
[
1743494640703,
0.582864008841,
1.382864008841
],
[
1743494642703,
0.4940581250107,
1.2940581250107002
],
[
1743494643703,
0.26709328450394,
1.06709328450394
],
[
1743494645703,
0.03568971748259997,
0.8356897174826
],
[
1743494646703,
0.34257581856499997,
1.1425758185650001
],
[
1743494648703,
0.21287440731599994,
1.012874407316
],
[
1743494650703,
0.595357427855,
1.395357427855
],
[
1743494652703,
0.29298047346244993,
1.09298047346245
],
[
1743494654703,
0.29432474395999997,
1.0943247439600001
],
[
1743494655703,
0.16856202849939994,
0.9685620284994
],
[
1743494656703,
0.08955267096029995,
0.8895526709603
],
[
1743494657703,
0.0035798865197999574,
0.8035798865198001
],
[
1743494658703,
0.19777152544550003,
0.9977715254455001
],
[
1743494662703,
0.05933719129956999,
0.85933719129957
],
[
1743494663703,
0.20223129675380003,
1.0022312967538
],
[
1743494666703,
0.15625389654099997,
0.956253896541
],
[
1743494667703,
0.010725005848999991,
0.8107250058490001
],
[
1743494670703,
0.08456957385969999,
0.8845695738597
],
[
1743494672703,
0.44989600699839993,
1.2498960069984
],
[
1743494673703,
0.261702870152,
1.0617028701520002
],
[
1743494675703,
0.40417469242493,
1.20417469242493
],
[
1743494677703,
0.4119945213159,
1.2119945213159
],
[
1743494678703,
0.23195658223244597,
1.031956582232446
],
[
1743494679703,
0.136146775585,
0.936146775585
],
[
1743494680703,
0.537517667324,
1.3375176673240001
],
[
1743494681703,
0.10996266909579999,
0.9099626690958
],
[
1743494682703,
0.3043972823419,
1.1043972823419002
],
[
1743494683703,
0.15502584532879993,
0.9550258453288
],
[
1743494685703,
0.518909482625,
1.318909482625
],
[
1743494686703,
0.486972828099,
1.286972828099
],
[
1743494687703,
0.517501673516,
1.317501673516
],
[
1743494688703,
0.07384076905763998,
0.87384076905764
],
[
1743494690703,
0.5393286826324,
1.3393286826324
],
[
1743494691703,
0.4524299222972,
1.2524299222972002
],
[
1743494692703,
0.26148856508099994,
1.061488565081
],
[
1743494693703,
0.140898056208,
0.940898056208
],
[
1743494695703,
0.5558367183117999,
1.3558367183117999
],
[
1743494696703,
0.2865876732317,
1.0865876732317
],
[
1743494700703,
0.130856762691,
0.930856762691
],
[
1743494701703,
0.37301144984629997,
1.1730114498463
],
[
1743494702703,
0.10587643487529996,
0.9058764348753
],
[
1743494703703,
0.4094504190936,
1.2094504190936002
],
[
1743494704703,
0.29570618277079996,
1.0957061827708001
],
[
1743494707703,
0.5344398038961999,
1.3344398038962
],
[
1743494713703,
0.5108561111947,
1.3108561111947
],
[
1743494716703,
0.4967404874382,
1.2967404874382
],
[
1743494718703,
0.16421548539099995,
0.964215485391
],
[
1743494722703,
0.3369546693602,
1.1369546693602
],
[
1743494723703,
0.36901829225677996,
1.16901829225678
],
[
1743494724703,
0.2601130584429999,
1.060113058443
],
[
1743494727703,
0.17908529777429993,
0.9790852977743
],
[
1743494728703,
0.1936070655055,
0.9936070655055
],
[
1743494729703,
0.3219735174075,
1.1219735174075
],
[
1743494730703,
0.58042205731,
1.3804220573100001
],
[
1743494733703,
0.042081774314679965,
0.84208177431468
],
[
1743494738703,
0.404165410876,
1.204165410876
],
[
1743494739703,
0.5417908149389999,
1.3417908149389999
],
[
1743494740703,
0.41193636639699993,
1.211936366397
],
[
1743494742703,
0.4481399976821,
1.2481399976821002
],
[
1743494743703,
0.14032162774930002,
0.9403216277493001
],
[
1743494744703,
0.03990731490299998,
0.8399073149030001
],
[
1743494745703,
0.16694999470799998,
0.966949994708
],
[
1743494746703,
0.29632337571531,
1.09632337571531
],
[
1743494748703,
0.05956236899699996,
0.859562368997
],
[
1743494749703,
0.20326996557414,
1.0032699655741402
],
[
1743494750703,
0.41996946684399994,
1.219969466844
],
[
1743494752703,
0.389805090741,
1.189805090741
],
[
1743494754703,
0.26795158908039995,
1.0679515890803999
],
[
1743494755703,
0.47592957701639993,
1.2759295770164
],
[
1743494758703,
0.283335857396,
1.083335857396
],
[
1743494760703,
0.4771203376958,
1.2771203376958
],
[
1743494762703,
0.5385588084523,
1.3385588084523001
],
[
1743494764703,
0.470043308831,
1.2700433088310001
],
[
1743494765703,
0.292745377462,
1.0927453774620002
],
[
1743494768703,
0.03891191665219995,
0.8389119166522
],
[
1743494773703,
0.3313532414815,
1.1313532414815
],
[
1743494774703,
0.21756517058769997,
1.0175651705877
],
[
1743494776703,
0.591964780214,
1.391964780214
],
[
1743494777703,
0.28626853520099993,
1.086268535201
],
[
1743494778703,
0.31938134319196,
1.11938134319196
],
[
1743494779703,
0.5114113859439999,
1.311411385944
],
[
1743494783703,
0.359007669763,
1.159007669763
],
[
1743494784703,
0.355190008759,
1.155190008759
],
[
1743494786703,
0.32550399390609996,
1.1255039939061
],
[
1743494789703,
0.04670871724599995,
0.8467087172459999
],
[
1743494792703,
0.0010229389524999966,
0.8010229389525001
],
[
1743494794703,
0.43841297419913994,
1.2384129741991399
],
[
1743494795703,
0.576108206148,
1.376108206148
],
[
1743494796703,
0.22949929364099997,
1.029499293641
],
[
1743494797703,
0.3360960119417,
1.1360960119417
],
[
1743494798703,
0.24904209821099998,
1.049042098211
],
[
1743494799703,
0.3473018442289,
1.1473018442289
],
[
1743494800703,
0.4248861723492,
1.2248861723492
],
[
1743494801703,
0.19775899711939993,
0.9977589971194
],
[
1743494804703,
0.020230545299250002,
0.82023054529925
]
]
}
]
stories.add('线图（time）', () => (
<Wcontainer className="demos">
<Wline
height="300"
config={{
xAxis: {
type: 'time',
mask: 'HH:mm:ss',
},
// symbol: true,
// spline: true,
// area: {
// geomStyle(x, y, type, extra) {
// if (type === '平均值') {
// return {
// opacity: 0,
// fill: 'transparent',
// };
// }
// return {};
// },
// },
// geomStyle(x, y, type, extra) {
// if (type === '范围') {
// return {
// opacity: 0,
// fill: 'transparent',
// stroke: 'transparent',
// };
// }
// return {};
// },
slider: true,
animate: {
update: false,
},
}}
// data={testData}
data={fillMissingTimestamps(testData, 0)}
// force={true}
/>
</Wcontainer>
));
stories.add('线图（cat）', () => (
<Wcontainer className="demos">
<Wline
height="300"
config={{
xAxis: {
type: 'cat',
},
// legend: {
// foldable: true,
// },
symbol: true,
// spline: true,
area: true,
}}
data={lineData}
// force={true}
/>
</Wcontainer>
));
const barData = generateData(300);
stories.add('柱状图', () => (
<Wcontainer className="demos">
<Wbar
height="300"
config={{
xAxis: {
type: 'timeCat',
mask: 'HH:mm:ss',
},
// legend: {
// foldable: true,
// },
// slider: true,
// animate: {
// // enter: false,
// update: false,
// // leave: false,
// },
// columnWidthRatio: 1,
}}
data={barData}
// force={{
// bigdata: true,
// }}
/>
</Wcontainer>
));
const pieData = [
{
name: '饼图测试数据',
data: [
['a', 40.5],
['b', 27.9],
['c', 24.1],
['d', 15.5],
['e', 7.1],
['f', 5.6],
['g', 3.2],
['h', 2.3],
['i', 1.5],
['j', 0.3],
['k', 0.2],
],
},
];
stories.add('饼图', () => (
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Wpie
height="300"
config={{
autoFormat: true,
}}
data={pieData}
/>
<Wpie height="300" config={{}} data={pieData} />
</div>
));
const scatterData = generateData(2000);
stories.add('散点图', () => (
<Wcontainer className="demos">
<Wscatter
height="300"
config={{
xAxis: {
type: 'time',
mask: 'HH:mm:ss',
},
}}
data={scatterData}
/>
</Wcontainer>
));
stories.add('数据从无到有', () => {
const [d, setD] = useState([]);
useEffect(() => {
const timer = setTimeout(() => {
setD(lineData);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (
<Wcontainer className="demos">
<Wline
height="300"
config={{
area: true,
}}
data={d}
/>
</Wcontainer>
);
});
stories.add('从大数据变普通数据（线图）', () => {
const [d, setD] = useState(lineData);
useEffect(() => {
const timer = setTimeout(() => {
const newData = generateData(10);
setD(newData);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (
<Wcontainer className="demos">
<Wline
height="300"
config={{
area: true,
xAxis: {
type: 'cat',
},
}}
data={d}
/>
</Wcontainer>
);
});
const simplePieData = [
{
name: '饼图测试数据',
data: [
['a', 40.5],
['e', 7.1],
['b', 27.9],
['c', 24.1],
],
},
];
stories.add('从大数据变普通数据（饼图）', () => {
const [d, setD] = useState(pieData);
useEffect(() => {
const timer = setTimeout(() => {
setD(simplePieData);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (
<Wcontainer className="demos">
<Wpie
height="300"
config={{
autoFormat: true,
}}
data={d}
/>
</Wcontainer>
);
});
stories.add('更改配置项', () => {
const [format, setFormat] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setFormat(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (
<Wcontainer className="demos">
<Wpie
height="300"
config={{
autoFormat: format,
}}
data={pieData}
/>
</Wcontainer>
);
});