œ_#ÁÕ§TE NAŒ“KeÉ:”(åŽÖJÞùY’‚ñùž7; «]Û ý`8g“¯B© jdÖÖ¸ðzœ¸¦4Ç3Kó^(ÍÖ¼ Õ€pvìwšõB4df$Èü^0˜…åÌC$#2FŽÑ§±¦ÛZ/÷š&m£ñzÒÖ ’.Î]!Î;ƒ(Õ–¢d/—#Kª+tZyuÏB>NÛÖ†(¸ŒSà'³„Y˜´-_•¦¼´˜OlNK§¶ÒàŠˆTHµƒeTPå·fïM’…þuÏÍüp6دªE£åü‡ZØ'CKF#â«;‹eyO Qp„†l"ö1èíÙP ÏŒúl! BÝ2ñª•_VÁÉ÷3eu`–F¸ìI--ö<¿žë¯4õ캿¢)34Å{wMÉ2ÆÖFŸ¥`e9Ú¶¸P‡.”FÔï rY ‚²ÈTB,{ÛœéJ}«àQ4¹0Rû4D‚B§S‘ dO•v¾„™Sן¯3FeŸ™«+ÓâwH dÕÛÌì·P4ë&¥#rÜÉ Ù¦ê†ý·xòqk¯2,¹§™E\ék‚×Sá”ÚºÙ⺷ö£6…à ʾ qSá³Å|;àû}4Ÿ($â¹VY~óÍ!èÜÒŒËX½Ù1j‚VíÍŸš³+œ]«½g{_{/vµ½\¢¶vÉWKÿ:ñám½ ¥ S²x‘t ŽšÝÙÿÀÇ^ný PK IW™k‚½÷ á _rels/.relsUT dìd dìd dìd’ÏNÃ0‡ï{ŠÈ÷ÕÝ@¡¥» ¤Ý*`%îÑ&QâÁöö‚J£ì°cœŸ¿|¶²ÙÆA½rL½wVE Šñ¶w†çúay * 9Kƒw¬áÈ ¶ÕbóÄIîI]’Ê—4t"á1™ŽGJ…ìòMããH’±Å@æ…ZÆuYÞ`üÍ€jÂT;«!îì T}|Û7MoøÞ›ýÈNN<|v–í2ÄÜ¥ÏèšbË¢Ázó˜Ë )„"£OÏ7ú{ZYÈ’yÞç#1'tuÉM?6o>Z´_å9›ëKÚ˜}?þ³žÏÌ·N>fµx PK IWª½e ¢ U € word/document.xmlUT dìdPK IWþË3” z €J¢ word/settings.xmlUT dìdPK IWC‡{š' ƒ €¤ docProps/custom.xmlUT dìdPK IW츱=Œ €‡¥ [Content_Types].xmlUT dìdPK IWV%ë±" €U§ docProps/app.xmlUT dìdPK IW€RŒ 3 €¶¨ docProps/core.xmlUT dìdPK IWkòDn ô €ª word/_rels/document.xml.relsUT dìdPK IW;$î €Î« word/fontTable.xmlUT dìdPK IW+åäz] ÷. €ý¬ word/numbering.xmlUT dìdPK IW¤2×r- ¿ €›° word/styles.xmlUT dìdPK IWMFÒ ø €´ word/header1.xmlUT dìdPK IWF— T e €· word/media/image1.jpegUT dìdPK IW!Yéáå €°Ë word/media/image2.pngUT dìdPK IW°Àºë ú €ÙÌ word/media/image3.pngUT dìdPK IW$“†ª L €Î word/footer1.xmlUT dìdPK IWzaGôM €ñÑ word/footer2.xmlUT dìdPK IW–µâº P €}Õ word/theme/theme1.xmlUT dìdPK IW™k‚½÷ á €{Û _rels/.relsUT PK ! bîh^ [Content_Types].xml ¢( ¬”ËNÃ0E÷HüCä-Jܲ@5í‚Ç*Q>Àēƪc[žiiÿž‰ûB¡j7±ÏÜ{2ñÍh²nm¶‚ˆÆ»R‹ÈÀU^7/ÅÇì%¿’rZYï @1__f› ˜q·ÃR4DáAJ¬h>€ãÚÇV߯¹ªZ¨9ÈÛÁàNVÞ8Ê©ÓãÑÔji){^óã-I‹"{Üv^¥P!XS)bR¹rú—K¾s(¸3Õ`cÞ0†½ÝÎß»¾7M4²©ŠôªZÆk+¿|\|z¿(Ž‹ôPúº6h_-[ž@!‚ÒØ Pk‹´2nÏ}Ä?£LËð Ýû%áÄßdºždN"m,à¥ÇžDO97*‚~§Èɸ8ÀOíc|n¦Ñ äEøÿöéºóÀBÉÀ!$}‡íàÈé;{ìÐå[ƒîñ–é2þ ÿÿ PK ! µU0#ô L _rels/.rels ¢( ¬’MOÃ0†ïHü‡È÷ÕÝBKwAH»!T~€Iܵ£$Ý¿'TƒG½~üÊÛÝ<êÈ!öâ4¬‹;#¶w†—úqu *&r–Fq¬áÄvÕõÕö™GJy(v½*«¸¨¡KÉß#FÓñD±Ï.W ¥†=™ZÆMYÞbø®ÕBS톰·7 ê“Ï›×–¦é ?ˆ9LìÒ™ÈsbgÙ®|Èl!õùUSh9i°bžr:"y_dlÀóD›¿ý|-NœÈR"4ø2ÏGÇ% õZ´4ñËyÄ7 ëÈðÉ‚‹¨Þ ÿÿ PK ! Q48wÛ — xl/workbook.xml¤UÙnâ0}iþ!cñ‡ *–¢AšVU×$dC¬&vÆv UÕŸë@XÊK§/¹p|Žï¹N÷b“¥Ö •Š ÞC¸î"‹òHÄŒ¯zèá~b·‘¥4á1I§=ôJºèÿüÑ] ù¼âÙ ®z(Ñ:GE ͈ª‹œrˆ,…̈†©\9*—”Ä*¡Tg©ã¹nàd„q´Eåg0ÄrÉ":Q‘Q®· ’¦D}•°\UhYô¸ŒÈç"·#‘å ±`)Ó¯%(²²(œ®¸d‘‚ì nZ w v¡ñª• t¶TÆ")”Xê:@;[Ògú±ë`|²›ó=ø’ïHúÂL÷¬dðEVÁ+8€a÷Ûh¬Uz%„Íû"ZsÏÍCýî’¥ôqk]‹äù5ÉL¦Rd¥Dé˘i÷P ¦bM/|dÉ",…¨çãFNoçiûéë>aêiçsó#ðÄ ÕTr¢éHp ÜIú®ÝJìQ"ÀÜÖ-ý[0I¡¦ÀZ Z…d¡nˆN¬B¦=4 g %PDF-1.4 %âãÏÓ 3 0 obj << /Linearized 1 /L 422775 ÿØÿà JFIF ÿÛ C ÿÛ C ÿÀ X" ÿÄ ÿÄ H !1A"Qaq2‘¡#±ÁBRÑ3Cbrá$S‚¢²ð4ñ%6DTc’ÂsÿÄ ÿÄ = !1AQ"aq‘Á2R¡±BÑð#3br’²4á$‚¢ÂñÿÚ ? áHBßÝ`„! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! !@B„ „! ! stream
/**
* Theme: Larkon - Responsive Bootstrap 5 Admin Dashboard
* Author: Techzaa
* Module/App: Apex Area Charts
*/
//
// BASIC HEATMAP - SINGLE SERIES
//
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
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 colors = ["#1c84ee"];
var options = {
chart: {
toolbar: {
show: false,
},
height: 380,
type: 'heatmap',
},
dataLabels: {
enabled: false
},
colors: colors,
series: [{
name: 'Metric 1',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 2',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 3',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 4',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 5',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 6',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 7',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 8',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 9',
data: generateData(20, {
min: 0,
max: 90
})
}
],
xaxis: {
type: 'category',
},
}
var chart = new ApexCharts(
document.querySelector("#basic-heatmap"),
options
);
chart.render();
//
// HEATMAP - MULTIPLE SERIES
//
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
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 colors = ["#1c84ee", "#53389f", "#7f56da", "#ff86c8", "#ef5f5f", "#ff6c2f", "#f9b931", '#22c55e','#4ecac2'];
var options = {
chart: {
toolbar: {
show: false,
},
height: 380,
type: 'heatmap',
},
dataLabels: {
enabled: false
},
colors: colors,
series: [{
name: 'Metric 1',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 2',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 3',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 4',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 5',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 6',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 7',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 8',
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: 'Metric 9',
data: generateData(20, {
min: 0,
max: 90
})
}
],
xaxis: {
type: 'category',
},
}
var chart = new ApexCharts(
document.querySelector("#multiple-series-heatmap"),
options
);
chart.render();
//
// HEATMAP - COLOR RANGE
//
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
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 colors = ["#1c84ee","#ef5f5f","#f9b931","#22c55e"];
var options = {
chart: {
toolbar: {
show: false,
},
height: 380,
type: 'heatmap',
},
plotOptions: {
heatmap: {
shadeIntensity: 0.5,
colorScale: {
ranges: [{
from: -30,
to: 5,
name: 'Low',
color: colors[0]
},
{
from: 6,
to: 20,
name: 'Medium',
color: colors[1]
},
{
from: 21,
to: 45,
name: 'High',
color: colors[2]
},
{
from: 46,
to: 55,
name: 'Extreme',
color: colors[3]
}
]
}
}
},
dataLabels: {
enabled: false
},
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
})
}
],
}
var chart = new ApexCharts(
document.querySelector("#color-range-heatmap"),
options
);
chart.render();
//
// HEATMAP - RANGE WITHOUT SHADES
//
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
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 colors = ["#1c84ee","#4ecac2"];
var options = {
chart: {
toolbar: {
show: false,
},
height: 380,
type: 'heatmap',
},
stroke: {
width: 0
},
plotOptions: {
heatmap: {
radius: 30,
enableShades: false,
colorScale: {
ranges: [{
from: 0,
to: 50,
color: colors[0]
},
{
from: 51,
to: 100,
color: colors[1]
},
],
},
}
},
colors: colors,
dataLabels: {
enabled: true,
style: {
colors: ['#fff']
}
},
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
})
}
],
xaxis: {
type: 'category',
},
grid: {
borderColor: '#f1f3fa'
}
}
var chart = new ApexCharts(
document.querySelector("#rounded-heatmap"),
options
);
chart.render();