@kyndryl-design-system/shidoka-charts 2.4.0 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{Chart as o,registerables as r}from'./../../../external/chart.js/dist/chart.js';import{BoxPlotController as t,BoxAndWiskers as e}from'./../../../external/@sgratzl/chartjs-chart-boxplot/build/index.js';import{getTokenThemeVal as a}from'./../../../external/@kyndryl-design-system/shidoka-foundation/common/helpers/color.js';import{getComputedColorPalette as l}from"../colorPalettes.js";o.register(...r,t,e);const i="boxplot",d=o=>({scales:{x:{grid:{display:"y"===o.options.indexAxis}},y:{grid:{display:"y"!==o.options.indexAxis}}},plugins:{legend:{display:!0,position:"bottom"},tooltip:{enabled:!0,callbacks:{title:r=>{const t="y"===o.options.indexAxis?"y":"x",e=r[0].chart.options.scales[t].title?.text;return e?`${e}: ${r[0].label}`:r[0].label}}}},...o.options}),n=(o,r)=>{const{colorPalette:t="categorical",outlierStyle:e="circle",outlierRadius:i=3,datasetOptionsOverride:d={}}=o.options,n=l(t),s=n[r%n.length],c=String(r+1).padStart(2,"0"),m=t.match(/^([a-z]+?)(\d{1,2})$/i),u=m?m[1]:t,p=m?m[2].padStart(2,"0"):c,h="categorical"===t?`sequential-${c}`:`${u}-${p}`,g=`--kd-color-data-viz-${h}-40`,y=`--kd-color-data-viz-${h}-20`,x=a(`--kd-color-data-viz-${h}-70`)||s,k=a(g)||`${s}40`;return{borderColor:x,borderWidth:1,backgroundColor:a(y)||`${s}20`,lowerBackgroundColor:k,outlierStyle:e,outlierRadius:i,outlierBorderWidth:1.5,outlierBackgroundColor:"transparent",outlierBorderColor:x,meanStyle:"circle",meanRadius:3,meanBorderWidth:1,meanBackgroundColor:a("--kd-color-data-viz-neutral-background-color"),meanBorderColor:x,...d}},s=(o,r,t,e=0)=>{const a=Array.from({length:o},(()=>Math.floor(Math.random()*(t-r)+r))).sort(((o,r)=>o-r));for(let o=0;o<e;o++)Math.random()>.5?a.push(t+Math.floor(Math.random()*t*.5)):a.unshift(Math.max(0,r-Math.floor(Math.random()*r*.5)));return a};export{n as datasetOptions,s as generateRandomData,d as options,i as type};
|
|
2
2
|
//# sourceMappingURL=boxplot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"boxplot.js","sources":["../../../../src/common/config/chartTypes/boxplot.js"],"sourcesContent":["import { getComputedColorPalette } from '../colorPalettes';\n\nexport const type = 'boxplot';\n\nexport const options = (ctx) => {\n
|
|
1
|
+
{"version":3,"file":"boxplot.js","sources":["../../../../src/common/config/chartTypes/boxplot.js"],"sourcesContent":["import { Chart, registerables } from 'chart.js';\nimport {\n BoxPlotController,\n BoxAndWiskers,\n} from '@sgratzl/chartjs-chart-boxplot';\nimport { getTokenThemeVal } from '@kyndryl-design-system/shidoka-foundation/common/helpers/color';\nimport { getComputedColorPalette } from '../colorPalettes';\n\nChart.register(...registerables, BoxPlotController, BoxAndWiskers);\n\nexport const type = 'boxplot';\nconst defaultBorderWidth = 1;\n\nexport const options = (ctx) => ({\n scales: {\n x: { grid: { display: ctx.options.indexAxis === 'y' } },\n y: { grid: { display: ctx.options.indexAxis !== 'y' } },\n },\n plugins: {\n legend: { display: true, position: 'bottom' },\n tooltip: {\n enabled: true,\n callbacks: {\n title: (items) => {\n const axis = ctx.options.indexAxis === 'y' ? 'y' : 'x';\n const title = items[0].chart.options.scales[axis].title?.text;\n return title ? `${title}: ${items[0].label}` : items[0].label;\n },\n },\n },\n },\n ...ctx.options,\n});\n\nexport const datasetOptions = (ctx, index) => {\n const {\n colorPalette = 'categorical',\n outlierStyle = 'circle',\n outlierRadius = 3,\n datasetOptionsOverride = {},\n } = ctx.options;\n\n const palette = getComputedColorPalette(colorPalette);\n const hex = palette[index % palette.length];\n const idxString = String(index + 1).padStart(2, '0');\n\n const match = colorPalette.match(/^([a-z]+?)(\\d{1,2})$/i);\n const base = match ? match[1] : colorPalette;\n const num = match ? match[2].padStart(2, '0') : idxString;\n\n const prefix =\n colorPalette === 'categorical'\n ? `sequential-${idxString}`\n : `${base}-${num}`;\n\n const borderToken = `--kd-color-data-viz-${prefix}-70`;\n const lowerToken = `--kd-color-data-viz-${prefix}-40`;\n const upperToken = `--kd-color-data-viz-${prefix}-20`;\n\n const borderColor = getTokenThemeVal(borderToken) || hex;\n const lowerBackgroundColor = getTokenThemeVal(lowerToken) || `${hex}40`;\n const upperBackgroundColor = getTokenThemeVal(upperToken) || `${hex}20`;\n const neutralBg = getTokenThemeVal(\n '--kd-color-data-viz-neutral-background-color'\n );\n\n return {\n borderColor,\n borderWidth: defaultBorderWidth,\n backgroundColor: upperBackgroundColor,\n lowerBackgroundColor,\n outlierStyle,\n outlierRadius,\n outlierBorderWidth: 1.5,\n outlierBackgroundColor: 'transparent',\n outlierBorderColor: borderColor,\n meanStyle: 'circle',\n meanRadius: 3,\n meanBorderWidth: defaultBorderWidth,\n meanBackgroundColor: neutralBg,\n meanBorderColor: borderColor,\n ...datasetOptionsOverride,\n };\n};\n\nexport const generateRandomData = (count, min, max, outliers = 0) => {\n const values = Array.from({ length: count }, () =>\n Math.floor(Math.random() * (max - min) + min)\n ).sort((a, b) => a - b);\n\n for (let i = 0; i < outliers; i++) {\n if (Math.random() > 0.5) {\n values.push(max + Math.floor(Math.random() * max * 0.5));\n } else {\n values.unshift(Math.max(0, min - Math.floor(Math.random() * min * 0.5)));\n }\n }\n\n return values;\n};\n"],"names":["Chart","register","registerables","BoxPlotController","BoxAndWiskers","type","options","ctx","scales","x","grid","display","indexAxis","y","plugins","legend","position","tooltip","enabled","callbacks","title","items","axis","chart","text","label","datasetOptions","index","colorPalette","outlierStyle","outlierRadius","datasetOptionsOverride","palette","getComputedColorPalette","hex","length","idxString","String","padStart","match","base","num","prefix","lowerToken","upperToken","borderColor","getTokenThemeVal","lowerBackgroundColor","borderWidth","backgroundColor","outlierBorderWidth","outlierBackgroundColor","outlierBorderColor","meanStyle","meanRadius","meanBorderWidth","meanBackgroundColor","meanBorderColor","generateRandomData","count","min","max","outliers","values","Array","from","Math","floor","random","sort","a","b","i","push","unshift"],"mappings":"4YAQAA,EAAMC,YAAYC,EAAeC,EAAmBC,GAExC,MAACC,EAAO,UAGPC,EAAWC,IAAS,CAC/BC,OAAQ,CACNC,EAAG,CAAEC,KAAM,CAAEC,QAAmC,MAA1BJ,EAAID,QAAQM,YAClCC,EAAG,CAAEH,KAAM,CAAEC,QAAmC,MAA1BJ,EAAID,QAAQM,aAEpCE,QAAS,CACPC,OAAQ,CAAEJ,SAAS,EAAMK,SAAU,UACnCC,QAAS,CACPC,SAAS,EACTC,UAAW,CACTC,MAAQC,IACN,MAAMC,EAAiC,MAA1Bf,EAAID,QAAQM,UAAoB,IAAM,IAC7CQ,EAAQC,EAAM,GAAGE,MAAMjB,QAAQE,OAAOc,GAAMF,OAAOI,KACzD,OAAOJ,EAAQ,GAAGA,MAAUC,EAAM,GAAGI,QAAUJ,EAAM,GAAGI,KAAK,QAKlElB,EAAID,UAGIoB,EAAiB,CAACnB,EAAKoB,KAClC,MAAMC,aACJA,EAAe,cAAaC,aAC5BA,EAAe,SAAQC,cACvBA,EAAgB,EAACC,uBACjBA,EAAyB,CAAE,GACzBxB,EAAID,QAEF0B,EAAUC,EAAwBL,GAClCM,EAAMF,EAAQL,EAAQK,EAAQG,QAC9BC,EAAYC,OAAOV,EAAQ,GAAGW,SAAS,EAAG,KAE1CC,EAAQX,EAAaW,MAAM,yBAC3BC,EAAOD,EAAQA,EAAM,GAAKX,EAC1Ba,EAAMF,EAAQA,EAAM,GAAGD,SAAS,EAAG,KAAOF,EAE1CM,EACa,gBAAjBd,EACI,cAAcQ,IACd,GAAGI,KAAQC,IAGXE,EAAa,uBAAuBD,OACpCE,EAAa,uBAAuBF,OAEpCG,EAAcC,EAJA,uBAAuBJ,SAIUR,EAC/Ca,EAAuBD,EAAiBH,IAAe,GAAGT,MAMhE,MAAO,CACLW,cACAG,YAzDuB,EA0DvBC,gBAR2BH,EAAiBF,IAAe,GAAGV,MAS9Da,uBACAlB,eACAC,gBACAoB,mBAAoB,IACpBC,uBAAwB,cACxBC,mBAAoBP,EACpBQ,UAAW,SACXC,WAAY,EACZC,gBAnEuB,EAoEvBC,oBAjBgBV,EAChB,gDAiBAW,gBAAiBZ,KACdd,EACJ,EAGU2B,EAAqB,CAACC,EAAOC,EAAKC,EAAKC,EAAW,KAC7D,MAAMC,EAASC,MAAMC,KAAK,CAAE9B,OAAQwB,IAAS,IAC3CO,KAAKC,MAAMD,KAAKE,UAAYP,EAAMD,GAAOA,KACzCS,MAAK,CAACC,EAAGC,IAAMD,EAAIC,IAErB,IAAK,IAAIC,EAAI,EAAGA,EAAIV,EAAUU,IACxBN,KAAKE,SAAW,GAClBL,EAAOU,KAAKZ,EAAMK,KAAKC,MAAMD,KAAKE,SAAWP,EAAM,KAEnDE,EAAOW,QAAQR,KAAKL,IAAI,EAAGD,EAAMM,KAAKC,MAAMD,KAAKE,SAAWR,EAAM,MAItE,OAAOG,CAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{getComputedColorPalette as o}from"../colorPalettes.js";const
|
|
1
|
+
import'./../../../external/chart.js/auto/auto.js';import{getComputedColorPalette as o}from"../colorPalettes.js";import{getTokenThemeVal as r}from'./../../../external/@kyndryl-design-system/shidoka-foundation/common/helpers/color.js';import{BoxPlotController as t,BoxAndWiskers as e,ViolinController as a}from'./../../../external/@sgratzl/chartjs-chart-boxplot/build/index.js';import{Chart as l}from'./../../../external/chart.js/dist/chart.js';l.register(t,e,a);const n="violin",d=1,i=r("--kd-color-data-viz-neutral-border-primary"),s=r("--kd-color-data-viz-neutral-background-color"),c=o=>{const r="y"===o.options?.indexAxis;return{scales:{x:{grid:{display:r}},y:{grid:{display:!r}}},plugins:{legend:{display:!0,position:"bottom"},tooltip:{enabled:!0,callbacks:{title:o=>{const t=r?o[0].chart.options.scales.y.title?.text:o[0].chart.options.scales.x.title?.text;return t?`${t}: ${o[0].label}`:o[0].label}}}},elements:{boxplot:{borderWidth:1,backgroundColor:s,lowerBackgroundColor:s,upperBackgroundColor:s,medianStyle:"circle",medianRadius:6,medianBorderWidth:1,medianBorderColor:i,medianBackgroundColor:s}},...o.options}},m=(r,t)=>{const{colorPalette:e="categorical",backgroundAlpha:a="95",pointCount:l=100,violinWidth:n=.8,datasetOptionsOverride:d={}}=r.options||{},c=o(e);return{backgroundColor:c[t%c.length]+a,borderColor:i,borderWidth:1,meanStyle:"circle",meanRadius:4,meanBorderWidth:1,meanBorderColor:i,meanBackgroundColor:s,points:l,width:n,lowerBackgroundColor:s,upperBackgroundColor:s,...d}},u=(o,r,t,e=0)=>{const a=Array.from({length:o},(()=>Math.floor(Math.random()*(t-r)+r))).sort(((o,r)=>o-r));for(let o=0;o<e;o++)Math.random()>.5?a.push(t+Math.floor(Math.random()*t*.5)):a.unshift(Math.max(0,r-Math.floor(Math.random()*r*.5)));return a};export{m as datasetOptions,d as defaultBorderWidth,u as generateRandomData,c as options,n as type};
|
|
2
2
|
//# sourceMappingURL=violin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"violin.js","sources":["../../../../src/common/config/chartTypes/violin.js"],"sourcesContent":["import { getComputedColorPalette } from '../colorPalettes';\n\nexport const type = 'violin';\n\nexport const options = (ctx) => {\n const horizontal = ctx.options
|
|
1
|
+
{"version":3,"file":"violin.js","sources":["../../../../src/common/config/chartTypes/violin.js"],"sourcesContent":["import Chart from 'chart.js/auto';\nimport { getComputedColorPalette } from '../colorPalettes';\nimport { getTokenThemeVal } from '@kyndryl-design-system/shidoka-foundation/common/helpers/color';\nimport {\n BoxPlotController,\n BoxAndWiskers,\n ViolinController,\n} from '@sgratzl/chartjs-chart-boxplot';\n\nChart.register(BoxPlotController, BoxAndWiskers, ViolinController);\n\nexport const type = 'violin';\nexport const defaultBorderWidth = 1;\nconst borderColor = getTokenThemeVal(\n '--kd-color-data-viz-neutral-border-primary'\n);\nconst meanMedianOutlierBackgroundColor = getTokenThemeVal(\n '--kd-color-data-viz-neutral-background-color'\n);\n\nexport const options = (ctx) => {\n const horizontal = ctx.options?.indexAxis === 'y';\n\n return {\n scales: {\n x: { grid: { display: horizontal } },\n y: { grid: { display: !horizontal } },\n },\n plugins: {\n legend: { display: true, position: 'bottom' },\n tooltip: {\n enabled: true,\n callbacks: {\n title: (items) => {\n const axisLabel = horizontal\n ? items[0].chart.options.scales.y.title?.text\n : items[0].chart.options.scales.x.title?.text;\n return axisLabel\n ? `${axisLabel}: ${items[0].label}`\n : items[0].label;\n },\n },\n },\n },\n elements: {\n boxplot: {\n borderWidth: defaultBorderWidth,\n backgroundColor: meanMedianOutlierBackgroundColor,\n lowerBackgroundColor: meanMedianOutlierBackgroundColor,\n upperBackgroundColor: meanMedianOutlierBackgroundColor,\n medianStyle: 'circle',\n medianRadius: 6,\n medianBorderWidth: defaultBorderWidth,\n medianBorderColor: borderColor,\n medianBackgroundColor: meanMedianOutlierBackgroundColor,\n },\n },\n ...ctx.options,\n };\n};\n\nexport const datasetOptions = (ctx, index) => {\n const {\n colorPalette = 'categorical',\n backgroundAlpha = '95',\n pointCount = 100,\n violinWidth = 0.8,\n datasetOptionsOverride = {},\n } = ctx.options || {};\n\n const palette = getComputedColorPalette(colorPalette);\n const fill = palette[index % palette.length] + backgroundAlpha;\n\n return {\n backgroundColor: fill,\n borderColor: borderColor,\n borderWidth: defaultBorderWidth,\n meanStyle: 'circle',\n meanRadius: 4,\n meanBorderWidth: defaultBorderWidth,\n meanBorderColor: borderColor,\n meanBackgroundColor: meanMedianOutlierBackgroundColor,\n points: pointCount,\n width: violinWidth,\n lowerBackgroundColor: meanMedianOutlierBackgroundColor,\n upperBackgroundColor: meanMedianOutlierBackgroundColor,\n ...datasetOptionsOverride,\n };\n};\n\nexport const generateRandomData = (count, min, max, outliers = 0) => {\n const values = Array.from({ length: count }, () =>\n Math.floor(Math.random() * (max - min) + min)\n ).sort((a, b) => a - b);\n\n for (let i = 0; i < outliers; i++) {\n if (Math.random() > 0.5) {\n values.push(max + Math.floor(Math.random() * max * 0.5));\n } else {\n values.unshift(Math.max(0, min - Math.floor(Math.random() * min * 0.5)));\n }\n }\n\n return values;\n};\n"],"names":["Chart","register","BoxPlotController","BoxAndWiskers","ViolinController","type","defaultBorderWidth","borderColor","getTokenThemeVal","meanMedianOutlierBackgroundColor","options","ctx","horizontal","indexAxis","scales","x","grid","display","y","plugins","legend","position","tooltip","enabled","callbacks","title","items","axisLabel","chart","text","label","elements","boxplot","borderWidth","backgroundColor","lowerBackgroundColor","upperBackgroundColor","medianStyle","medianRadius","medianBorderWidth","medianBorderColor","medianBackgroundColor","datasetOptions","index","colorPalette","backgroundAlpha","pointCount","violinWidth","datasetOptionsOverride","palette","getComputedColorPalette","length","meanStyle","meanRadius","meanBorderWidth","meanBorderColor","meanBackgroundColor","points","width","generateRandomData","count","min","max","outliers","values","Array","from","Math","floor","random","sort","a","b","i","push","unshift"],"mappings":"mcASAA,EAAMC,SAASC,EAAmBC,EAAeC,GAErC,MAACC,EAAO,SACPC,EAAqB,EAC5BC,EAAcC,EAClB,8CAEIC,EAAmCD,EACvC,gDAGWE,EAAWC,IACtB,MAAMC,EAAwC,MAA3BD,EAAID,SAASG,UAEhC,MAAO,CACLC,OAAQ,CACNC,EAAG,CAAEC,KAAM,CAAEC,QAASL,IACtBM,EAAG,CAAEF,KAAM,CAAEC,SAAUL,KAEzBO,QAAS,CACPC,OAAQ,CAAEH,SAAS,EAAMI,SAAU,UACnCC,QAAS,CACPC,SAAS,EACTC,UAAW,CACTC,MAAQC,IACN,MAAMC,EAAYf,EACdc,EAAM,GAAGE,MAAMlB,QAAQI,OAAOI,EAAEO,OAAOI,KACvCH,EAAM,GAAGE,MAAMlB,QAAQI,OAAOC,EAAEU,OAAOI,KAC3C,OAAOF,EACH,GAAGA,MAAcD,EAAM,GAAGI,QAC1BJ,EAAM,GAAGI,KAAK,KAK1BC,SAAU,CACRC,QAAS,CACPC,YAlC0B,EAmC1BC,gBAAiBzB,EACjB0B,qBAAsB1B,EACtB2B,qBAAsB3B,EACtB4B,YAAa,SACbC,aAAc,EACdC,kBAxC0B,EAyC1BC,kBAAmBjC,EACnBkC,sBAAuBhC,OAGxBE,EAAID,QACR,EAGUgC,EAAiB,CAAC/B,EAAKgC,KAClC,MAAMC,aACJA,EAAe,cAAaC,gBAC5BA,EAAkB,KAAIC,WACtBA,EAAa,IAAGC,YAChBA,EAAc,GAAGC,uBACjBA,EAAyB,CAAE,GACzBrC,EAAID,SAAW,GAEbuC,EAAUC,EAAwBN,GAGxC,MAAO,CACLV,gBAHWe,EAAQN,EAAQM,EAAQE,QAAUN,EAI7CtC,YAAaA,EACb0B,YAhE8B,EAiE9BmB,UAAW,SACXC,WAAY,EACZC,gBAnE8B,EAoE9BC,gBAAiBhD,EACjBiD,oBAAqB/C,EACrBgD,OAAQX,EACRY,MAAOX,EACPZ,qBAAsB1B,EACtB2B,qBAAsB3B,KACnBuC,EACJ,EAGUW,EAAqB,CAACC,EAAOC,EAAKC,EAAKC,EAAW,KAC7D,MAAMC,EAASC,MAAMC,KAAK,CAAEf,OAAQS,IAAS,IAC3CO,KAAKC,MAAMD,KAAKE,UAAYP,EAAMD,GAAOA,KACzCS,MAAK,CAACC,EAAGC,IAAMD,EAAIC,IAErB,IAAK,IAAIC,EAAI,EAAGA,EAAIV,EAAUU,IACxBN,KAAKE,SAAW,GAClBL,EAAOU,KAAKZ,EAAMK,KAAKC,MAAMD,KAAKE,SAAWP,EAAM,KAEnDE,EAAOW,QAAQR,KAAKL,IAAI,EAAGD,EAAMM,KAAKC,MAAMD,KAAKE,SAAWR,EAAM,MAItE,OAAOG,CAAM"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-charts",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "Shidoka Charts",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"prepare": "npx husky install"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@kyndryl-design-system/shidoka-foundation": "^2.
|
|
29
|
+
"@kyndryl-design-system/shidoka-foundation": "^2.4.12",
|
|
30
30
|
"@kyndryl-design-system/shidoka-icons": "^2.0.0",
|
|
31
31
|
"@sgratzl/chartjs-chart-boxplot": "^4.4.4",
|
|
32
32
|
"chart.js": "^4.4.0",
|