From 49349b5edcfcf5fd8807031b3540ed6793a58884 Mon Sep 17 00:00:00 2001 From: graphieros Date: Sat, 9 Nov 2024 11:58:33 +0100 Subject: [PATCH 1/4] Update cy fixtures --- cypress/fixtures/candlestick.json | 26 ++++++++++---------- cypress/fixtures/donut.json | 8 +++---- cypress/fixtures/gauge.json | 20 ++++++++-------- cypress/fixtures/relation-circle.json | 10 ++++---- cypress/fixtures/scatter.json | 34 +++++++++++++-------------- cypress/fixtures/thermometer.json | 10 ++++---- 6 files changed, 54 insertions(+), 54 deletions(-) diff --git a/cypress/fixtures/candlestick.json b/cypress/fixtures/candlestick.json index 8f5fbe0a..9507c277 100644 --- a/cypress/fixtures/candlestick.json +++ b/cypress/fixtures/candlestick.json @@ -142,13 +142,13 @@ }, "grid": { "show": true, - "stroke": "#e1e5e8", + "stroke": "#e1e5e8ff", "strokeWidth": 0.5, "xAxis": { "dataLabels": { "show": true, "fontSize": 4, - "color": "#2D353C", + "color": "#2D353Cff", "offsetY": 0, "bold": false } @@ -157,7 +157,7 @@ "dataLabels": { "show": true, "fontSize": 12, - "color": "#2D353C", + "color": "#2D353Cff", "roundingValue": 0, "offsetX": 0, "bold": false, @@ -168,37 +168,37 @@ } }, "wick": { - "stroke": "#2D353C", + "stroke": "#2D353Cff", "strokeWidth": 0.5, "extremity": { "shape": "line", "size": "auto", - "color": "#2D353C" + "color": "#2D353Cff" } }, "candle": { "borderRadius": 1, - "stroke": "#2D353C", + "stroke": "#2D353Cff", "strokeWidth": 0.5, "colors": { - "bearish": "#dc3912", - "bullish": "#109618" + "bearish": "#dc3912ff", + "bullish": "#109618ff" }, "gradient": { "show": true, "intensity": 40, - "underlayer": "#FFFFFF" + "underlayer": "#FFFFFFff" }, "widthRatio": 0.5 } }, "zoom": { "show": true, - "color": "#CCCCCC" + "color": "#CCCCCCff" }, "title": { "text": "Title", - "color": "#2D353C", + "color": "#2D353Cff", "fontSize": 20, "bold": true, "subtitle": { @@ -210,8 +210,8 @@ }, "tooltip": { "show": true, - "backgroundColor": "#FFFFFF", - "color": "#2D353C", + "backgroundColor": "#FFFFFFff", + "color": "#2D353Cff", "fontSize": 14, "roundingValue": 0, "prefix": "", diff --git a/cypress/fixtures/donut.json b/cypress/fixtures/donut.json index 4a72e4ed..7b744cd3 100644 --- a/cypress/fixtures/donut.json +++ b/cypress/fixtures/donut.json @@ -37,7 +37,7 @@ "chart": { "useGradient": true, "gradientIntensity": 40, - "backgroundColor": "#FFFFFF", + "backgroundColor": "#FFFFFFff", "color": "#2D353C", "layout": { "labels": { @@ -97,7 +97,7 @@ } }, "legend": { - "backgroundColor": "#FFFFFF", + "backgroundColor": "#FFFFFFff", "color": "#2D353C", "show": true, "fontSize": 16, @@ -120,7 +120,7 @@ "tooltip": { "show": true, "color": "#2D353C", - "backgroundColor": "#FFFFFF", + "backgroundColor": "#FFFFFFff", "fontSize": 14, "showValue": true, "showPercentage": true, @@ -144,7 +144,7 @@ "outline": "1px solid #e1e5e8" }, "td": { - "backgroundColor": "#FFFFFF", + "backgroundColor": "#FFFFFFff", "color": "#2D353C", "outline": "1px solid #e1e5e8", "roundingValue": 0, diff --git a/cypress/fixtures/gauge.json b/cypress/fixtures/gauge.json index cec15800..27763cbb 100644 --- a/cypress/fixtures/gauge.json +++ b/cypress/fixtures/gauge.json @@ -24,8 +24,8 @@ "style": { "fontFamily": "inherit", "chart": { - "backgroundColor": "#FFFFFF", - "color": "#2D353C", + "backgroundColor": "#FFFFFFff", + "color": "#2D353Cff", "animation": { "use": true, "speed": 1, @@ -39,10 +39,10 @@ }, "markers": { "size": 1, - "color": "#2D353C", + "color": "#2D353Cff", "strokeWidth": 1, - "stroke": "#2D353C", - "backgroundColor": "#FFFFFF", + "stroke": "#2D353Cff", + "backgroundColor": "#FFFFFFff", "bold": true, "fontSizeRatio": 1, "offsetY": 0, @@ -50,15 +50,15 @@ }, "pointer": { "size": 1, - "stroke": "#2D353C", + "stroke": "#2D353Cff", "strokeWidth": 12, "useRatingColor": true, "color": "#CCCCCC", "circle": { "radius": 10, - "stroke": "#2D353C", + "stroke": "#2D353Cff", "strokeWidth": 2, - "color": "#FFFFFF" + "color": "#FFFFFFff" } } }, @@ -69,11 +69,11 @@ "roundingValue": 1, "showPlusSymbol": true, "useRatingColor": true, - "color": "#2D353C" + "color": "#2D353Cff" }, "title": { "text": "Title", - "color": "#2D353C", + "color": "#2D353Cff", "fontSize": 20, "bold": true, "subtitle": { diff --git a/cypress/fixtures/relation-circle.json b/cypress/fixtures/relation-circle.json index 0a1409e4..80b3fae3 100644 --- a/cypress/fixtures/relation-circle.json +++ b/cypress/fixtures/relation-circle.json @@ -197,7 +197,7 @@ ], "config": { "style": { - "backgroundColor": "#FFFFFF", + "backgroundColor": "#FFFFFFff", "fontFamily": "inherit", "size": 400, "limit": 50, @@ -206,7 +206,7 @@ "speedMs": 300 }, "labels": { - "color": "#2D353C", + "color": "#2D353Cff", "fontSize": 10 }, "links": { @@ -215,17 +215,17 @@ }, "circle": { "radiusProportion": 0.2, - "stroke": "#CCCCCC", + "stroke": "#CCCCCCff", "strokeWidth": 1, "offsetY": 0 }, "plot": { "radius": 2, - "color": "#2D353C" + "color": "#2D353Cff" }, "title": { "text": "Title", - "color": "#2D353C", + "color": "#2D353Cff", "fontSize": 20, "bold": true, "subtitle": { diff --git a/cypress/fixtures/scatter.json b/cypress/fixtures/scatter.json index fac07e00..1c84fb6c 100644 --- a/cypress/fixtures/scatter.json +++ b/cypress/fixtures/scatter.json @@ -25,8 +25,8 @@ "config": { "useCssAnimation": true, "style": { - "backgroundColor": "#FFFFFF", - "color":"#2D353C", + "backgroundColor": "#FFFFFFff", + "color":"#2D353Cff", "fontFamily":"inherit", "layout": { "height": 316, @@ -39,12 +39,12 @@ }, "axis": { "show": true, - "stroke":"#e1e5e8", + "stroke":"#e1e5e8ff", "strokeWidth":1 }, "plots": { "radius": 2, - "stroke": "#FFFFFF", + "stroke": "#FFFFFFff", "strokeWidth": 0.3, "opacity": 0.6, "significance": { @@ -64,7 +64,7 @@ "label": { "show": true, "fontSize": 12, - "color":"#2D353C", + "color":"#2D353Cff", "bold": true, "roundingValue": 2, "useSerieColor": true @@ -75,7 +75,7 @@ "name": "xAxis", "show": true, "fontSize": 8, - "color":"#2D353C", + "color":"#2D353Cff", "bold":false, "offsetX": 0, "offsetY": 0, @@ -85,7 +85,7 @@ "name":"yAxis", "show": true, "fontSize": 8, - "color":"#2D353C", + "color":"#2D353Cff", "bold":false, "offsetY": 0, "offsetX": 0, @@ -95,7 +95,7 @@ }, "title": { "text": "Title", - "color": "#2D353C", + "color": "#2D353Cff", "fontSize": 20, "bold": true, "subtitle": { @@ -107,16 +107,16 @@ }, "legend": { "show": true, - "backgroundColor":"#FFFFFF", - "color": "#2D353C", + "backgroundColor":"#FFFFFFff", + "color": "#2D353Cff", "fontSize" : 12, "bold": true, "roundingValue": 0 }, "tooltip": { "show": true, - "backgroundColor": "#FFFFFF", - "color": "#2D353C", + "backgroundColor": "#FFFFFFff", + "color": "#2D353Cff", "fontSize": 14, "roundingValue": 0 } @@ -128,13 +128,13 @@ "show": false, "th": { "backgroundColor": "#FAFAFA", - "color": "#2D353C", - "outline": "1px solid #e1e5e8" + "color": "#2D353Cff", + "outline": "1px solid #e1e5e8ff" }, "td": { - "backgroundColor": "#FFFFFF", - "color": "#2D353C", - "outline": "1px solid #e1e5e8", + "backgroundColor": "#FFFFFFff", + "color": "#2D353Cff", + "outline": "1px solid #e1e5e8ff", "roundingValue": 2, "roundingAverage": 1 }, diff --git a/cypress/fixtures/thermometer.json b/cypress/fixtures/thermometer.json index 87b96f6c..81cb350b 100644 --- a/cypress/fixtures/thermometer.json +++ b/cypress/fixtures/thermometer.json @@ -13,8 +13,8 @@ "style": { "fontFamily":"inherit", "chart": { - "backgroundColor":"#FFFFFF", - "color":"#2D353C", + "backgroundColor":"#FFFFFFff", + "color":"#2D353Cff", "height": 360, "thermometer": { "width": 48 @@ -29,7 +29,7 @@ "show": true, "sides": "both", "height": 2, - "stroke":"#e1e5e8", + "stroke":"#e1e5e8ff", "strokeWidth": 1, "showIntermediate": true, "gradient": { @@ -45,12 +45,12 @@ "fontSize": 20, "rounding": 1, "bold": true, - "color": "#2D353C" + "color": "#2D353Cff" } }, "title": { "text": "Title", - "color": "#2D353C", + "color": "#2D353Cff", "fontSize": 20, "bold": true, "subtitle": { From 4f6eae710e078530e6aca6175e894cbe989f9105 Mon Sep 17 00:00:00 2001 From: graphieros Date: Sat, 9 Nov 2024 11:59:27 +0100 Subject: [PATCH 2/4] Internal lib - Update color utils with alpha support --- src/lib.js | 268 +++++++++++++++++++++--------------- tests/lib.test.js | 238 +++++++++++++++++++++++++++----- tests/useNestedProp.test.js | 4 +- 3 files changed, 362 insertions(+), 148 deletions(-) diff --git a/src/lib.js b/src/lib.js index 9da886b8..cf8dfd4a 100755 --- a/src/lib.js +++ b/src/lib.js @@ -323,43 +323,50 @@ export const themePalettes = { export const opacity = ["00", "03", "05", "08", "0A", "0D", "0F", "12", "14", "17", "1A", "1C", "1F", "21", "24", "26", "29", "2B", "2E", "30", "33", "36", "38", "3B", "3D", "40", "42", "45", "47", "4A", "4D", "4F", "52", "54", "57", "59", "5C", "5E", "61", "63", "66", "69", "6B", "6E", "70", "73", "75", "78", "7A", "7D", "80", "82", "85", "87", "8A", "8C", "8F", "91", "94", "96", "99", "9C", "9E", "A1", "A3", "A6", "A8", "AB", "AD", "B0", "B3", "B5", "B8", "BA", "BD", "BF", "C2", "C4", "C7", "C9", "CC", "CF", "D1", "D4", "D6", "D9", "DB", "DE", "E0", "E3", "E6", "E8", "EB", "ED", "F0", "F2", "F5", "F7", "FA", "FC", "FF"]; + export function convertColorToHex(color) { - const hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i; - const rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)$/i; - const hslRegex = /^hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*[\d.]+)?\)$/i; + const hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i; + const rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/i; + const hslRegex = /^hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*([\d.]+))?\)$/i; if ([undefined, null, NaN].includes(color)) { return null; } - color = convertNameColorToHex(color) + + color = convertNameColorToHex(color); if (color === 'transparent') { return "#FFFFFF00"; } let match; + let alpha = 1; if ((match = color.match(hexRegex))) { - const [, r, g, b] = match; - return `#${r}${g}${b}`; + const [, r, g, b, a] = match; + alpha = a ? parseInt(a, 16) / 255 : 1; + return `#${r}${g}${b}${decimalToHex(Math.round(alpha * 255))}`; } else if ((match = color.match(rgbRegex))) { - const [, r, g, b] = match; - return `#${decimalToHex(r)}${decimalToHex(g)}${decimalToHex(b)}`; + const [, r, g, b, a] = match; + alpha = a ? parseFloat(a) : 1; + return `#${decimalToHex(r)}${decimalToHex(g)}${decimalToHex(b)}${decimalToHex(Math.round(alpha * 255))}`; } else if ((match = color.match(hslRegex))) { - const [, h, s, l] = match; - const rgb = hslToRgb(Number(h), Number(s), Number(l)); - return `#${decimalToHex(rgb[0])}${decimalToHex(rgb[1])}${decimalToHex(rgb[2])}`; + const [, h, s, l, a] = match; + alpha = a ? parseFloat(a) : 1; + const rgb = hslToRgba(Number(h), Number(s), Number(l)); + return `#${decimalToHex(rgb[0])}${decimalToHex(rgb[1])}${decimalToHex(rgb[2])}${decimalToHex(Math.round(alpha * 255))}`; } return null; } + export function decimalToHex(decimal) { const hex = Number(decimal).toString(16); return hex.length === 1 ? "0" + hex : hex; } -export function hslToRgb(h, s, l) { +export function hslToRgba(h, s, l, alpha = 1) { h /= 360; s /= 100; l /= 100; @@ -367,7 +374,7 @@ export function hslToRgb(h, s, l) { let r, g, b; if (s === 0) { - r = g = b = l; + r = g = b = l; // Achromatic (gray) } else { const hueToRgb = (p, q, t) => { if (t < 0) t += 1; @@ -389,11 +396,15 @@ export function hslToRgb(h, s, l) { Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), + alpha, ]; } export function shiftHue(hexColor, shiftAmount) { + const nakedHex = hexColor.length === 9 ? hexColor.substring(0, 7) : hexColor; + const alphaChannel = hexColor.length === 9 ? hexColor.substring(7, 9) : null; + const hexToRgb = (hex) => ({ r: parseInt(hex.substring(1, 3), 16), g: parseInt(hex.substring(3, 5), 16), @@ -452,7 +463,7 @@ export function shiftHue(hexColor, shiftAmount) { }; }; - const rgbColor = hexToRgb(hexColor || "#000000"); + const rgbColor = hexToRgb(nakedHex || "#000000"); const hslColor = rgbToHsl(rgbColor); hslColor.h += shiftAmount; hslColor.h = (hslColor.h + 1) % 1; @@ -460,9 +471,11 @@ export function shiftHue(hexColor, shiftAmount) { const shiftedRgbColor = hslToRgb(hslColor); const shiftedHexColor = `#${(shiftedRgbColor.r << 16 | shiftedRgbColor.g << 8 | shiftedRgbColor.b).toString(16).padStart(6, '0')}`; - return shiftedHexColor; + + return shiftedHexColor + (alphaChannel || ''); } + export function calcPolygonPoints({ centerX, centerY, @@ -597,22 +610,43 @@ export function degreesToRadians(degrees) { export function adaptColorToBackground(bgColor) { if (bgColor) { let color = bgColor; + let alpha = 1; + + if (color.startsWith('rgba')) { + const rgba = color.match(/rgba?\((\d+), (\d+), (\d+), ([\d.]+)\)/); + if (rgba) { + const [, r, g, b, a] = rgba; + alpha = parseFloat(a); + color = `#${parseInt(r).toString(16).padStart(2, '0')}${parseInt(g).toString(16).padStart(2, '0')}${parseInt(b).toString(16).padStart(2, '0')}`; + } + } + if (color.charAt(0) !== "#") { color = this.rgbToHex(bgColor); } + color = color.substring(1, 7); let r = parseInt(color.substring(0, 2), 16); let g = parseInt(color.substring(2, 4), 16); let b = parseInt(color.substring(4, 6), 16); + let uiColors = [r / 255, g / 255, b / 255]; + let c = uiColors.map((col) => { if (col <= 0.03928) { return col / 12.92; } return Math.pow((col + 0.055) / 1.055, 2.4); }); + let L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; - return L > 0.3 ? "#000000" : "#FFFFFF"; + + if (alpha < 1) { + const blendedLuminance = alpha * L + (1 - alpha) * 1; + return blendedLuminance > 0.3 ? "#000000" : "#FFFFFF"; + } else { + return L > 0.3 ? "#000000" : "#FFFFFF"; + } } return "#000000"; } @@ -621,7 +655,7 @@ export function convertConfigColors(config) { for (const key in config) { if (typeof config[key] === 'object' && !Array.isArray(config[key]) && config[key] !== null) { convertConfigColors(config[key]); - } else if (key === 'color' || key === 'backgroundColor' || key === 'stroke') { + } else if (['color', 'backgroundColor', 'stroke'].includes(key)) { if (config[key] === '') { config[key] = '#000000'; } else if (config[key] === 'transparent') { @@ -813,28 +847,53 @@ export function findArcMidpoint(pathElement) { return { x, y }; } +export function getCloserPoint(centerX, centerY, x, y, arcSize) { + if (x === centerX && y === centerY) { + return { x: centerX, y: centerY }; + } + const scaleFactor = getScaleFactorUsingArcSize(centerX, centerY, x, y, arcSize); + let deltaX = x - centerX; + let deltaY = y - centerY; + deltaX *= scaleFactor; + deltaY *= scaleFactor; + const newX = centerX + deltaX; + const newY = centerY + deltaY; + return { x: newX, y: newY }; +} + +export function getScaleFactorUsingArcSize(centerX, centerY, x, y, arcSize) { + const euclidianDistance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2); + if (arcSize >= euclidianDistance) { + console.warn('arcSize must be less than the distance from the point to the center') + } + const scaleFactor = 1 - arcSize / euclidianDistance; + return scaleFactor; +} + export function calcNutArrowPath(arc, center = false, yOffsetTop = 16, yOffsetBottom = 16, toCenter = false, hideStart = false, arcSize = 0, flatLen = 12) { - const { x, y } = findArcMidpoint(arc.path) - - const { x: endX, y: endY } = offsetFromCenterPoint({ - initX: x, - initY: y, - offset: arcSize, - centerX: center ? center.x : 0, - centerY: center ? center.y : 0 - }) + const { x } = findArcMidpoint(arc.path) const start = `${calcMarkerOffsetX(arc).x},${calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4} `; - const end = ` ${center ? center.x : endX},${center ? center.y : endY}`; - let mid = ""; + + let mid = "", midX, midY; if (x > arc.cx) { - mid = `${calcMarkerOffsetX(arc).x - flatLen},${calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4}`; + midX = calcMarkerOffsetX(arc).x - flatLen; + midY = calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4; + mid = `${midX},${midY}`; } else if (x < arc.cx) { - mid = `${calcMarkerOffsetX(arc).x + flatLen},${calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4}`; + midX = calcMarkerOffsetX(arc).x + flatLen; + midY = calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4; + mid = `${midX},${midY}`; } else { - mid = `${calcMarkerOffsetX(arc).x + flatLen},${calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4}`; + midX = calcMarkerOffsetX(arc).x + flatLen; + midY = calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4; + mid = `${midX},${midY}`; } - return `M${hideStart ? '' : start}${mid}${end}${toCenter ? `,${toCenter.x} ${toCenter.y}` : ''}`; + + const endpoint = getCloserPoint(center.x, center.y, midX, midY, arcSize) + const end = ` ${endpoint.x},${endpoint.y}`; + + return `M${hideStart ? '' : start}${mid}${end}`; } export function closestDecimal(num) { @@ -893,12 +952,13 @@ export function createCsvContent(rows) { } export function lightenHexColor(hexColor, percentLighter) { - if (!/^#([0-9A-F]{3}){1,2}$/i.test(hexColor)) { + if (!/^#([0-9A-F]{3}){1,2}([0-9A-F]{2})?$/i.test(hexColor)) { console.warn('lightenHexColor : Invalid hex color format'); - return "#000000" + return "#000000"; } let color = hexColor.replace('#', ''); + if (color.length === 3) { color = color.split('').map(c => c + c).join(''); } @@ -913,16 +973,21 @@ export function lightenHexColor(hexColor, percentLighter) { const lighterHex = `#${Math.round(newR).toString(16).padStart(2, '0')}${Math.round(newG).toString(16).padStart(2, '0')}${Math.round(newB).toString(16).padStart(2, '0')}`; + if (color.length === 8) { + const alpha = color.substring(6, 8); + return lighterHex + alpha; + } return lighterHex; } export function darkenHexColor(hexColor, percentDarker) { - if (!/^#([0-9A-F]{3}){1,2}$/i.test(hexColor)) { + if (!/^#([0-9A-F]{3}){1,2}([0-9A-F]{2})?$/i.test(hexColor)) { console.warn('darkenHexColor: Invalid hex color format'); return "#000000"; } let color = hexColor.replace('#', ''); + if (color.length === 3) { color = color.split('').map(c => c + c).join(''); } @@ -937,10 +1002,14 @@ export function darkenHexColor(hexColor, percentDarker) { const darkerHex = `#${Math.round(newR).toString(16).padStart(2, '0')}${Math.round(newG).toString(16).padStart(2, '0')}${Math.round(newB).toString(16).padStart(2, '0')}`; + if (color.length === 8) { + const alpha = color.substring(6, 8); + return darkerHex + alpha; + } + return darkerHex; } - export function niceNum(range, round) { const exponent = Math.floor(Math.log10(range)); const fraction = range / Math.pow(10, exponent); @@ -1015,87 +1084,48 @@ export function calculateNiceScaleWithExactExtremes(minValue, maxValue, maxTicks ticks }; } -export function interpolateColorHex(minColor, maxColor, minValue, maxValue, value) { - const hexToRgb = (hex) => ({ - r: parseInt(hex.substring(1, 3), 16), - g: parseInt(hex.substring(3, 5), 16), - b: parseInt(hex.substring(5, 7), 16), - }); - - const rgbToHex = ({ r, g, b }) => { - return `#${decimalToHex(r)}${decimalToHex(g)}${decimalToHex(b)}`; - }; - const rgbToHsl = ({ r, g, b }) => { - r /= 255; - g /= 255; - b /= 255; - const max = Math.max(r, g, b); - const min = Math.min(r, g, b); - let h, s, l = (max + min) / 2; - - if (max === min) { - h = s = 0; - } else { - const d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - h /= 6; +export function interpolateColorHex(minColor, maxColor, minValue, maxValue, value) { + const hexToRgba = (hex) => { + let r = parseInt(hex.substring(1, 3), 16); + let g = parseInt(hex.substring(3, 5), 16); + let b = parseInt(hex.substring(5, 7), 16); + let a = 1; // Default alpha value + + if (hex.length === 9) { + a = parseInt(hex.substring(7, 9), 16) / 255; // Extract alpha value if present } - return { h, s, l }; - }; - - const hslToRgb = ({ h, s, l }) => { - let r, g, b; - if (s === 0) { - r = g = b = l; - } else { - const hue2rgb = (p, q, t) => { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; - }; + return { r, g, b, a }; + }; - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); + const rgbToHex = ({ r, g, b, a }) => { + const decimalToHex = (x) => x.toString(16).padStart(2, '0'); + const hex = `#${decimalToHex(r)}${decimalToHex(g)}${decimalToHex(b)}`; + if (a !== 1) { + const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0'); + return hex + alphaHex; } - - return { - r: Math.round(r * 255), - g: Math.round(g * 255), - b: Math.round(b * 255), - }; + return hex; }; - const minRgbColor = hexToRgb(minColor); - const maxRgbColor = hexToRgb(maxColor); + const minColorRgb = hexToRgba(minColor); + const maxColorRgb = hexToRgba(maxColor); value = Math.min(Math.max(value, minValue), maxValue); - const normalizedValue = (value - minValue) / (maxValue - minValue); - const interpolatedRgbColor = { - r: Math.round(minRgbColor.r + (maxRgbColor.r - minRgbColor.r) * normalizedValue), - g: Math.round(minRgbColor.g + (maxRgbColor.g - minRgbColor.g) * normalizedValue), - b: Math.round(minRgbColor.b + (maxRgbColor.b - minRgbColor.b) * normalizedValue), + // Interpolate RGB components + const interpolatedRgb = { + r: Math.round(minColorRgb.r + (maxColorRgb.r - minColorRgb.r) * normalizedValue), + g: Math.round(minColorRgb.g + (maxColorRgb.g - minColorRgb.g) * normalizedValue), + b: Math.round(minColorRgb.b + (maxColorRgb.b - minColorRgb.b) * normalizedValue), }; - const interpolatedHslColor = rgbToHsl(interpolatedRgbColor); - const finalRgbColor = hslToRgb(interpolatedHslColor); - const finalHexColor = rgbToHex(finalRgbColor); + // Interpolate alpha channel if present + const interpolatedAlpha = minColorRgb.a + (maxColorRgb.a - minColorRgb.a) * normalizedValue; - return finalHexColor; + return rgbToHex({ ...interpolatedRgb, a: interpolatedAlpha }); } /** @@ -1769,29 +1799,29 @@ export function hasDeepProperty(obj, path) { export function sanitizeArray(arr, keys = []) { function sanitizeValue(value) { - if([NaN, undefined, Infinity, -Infinity, null].includes(value)) { + if ([NaN, undefined, Infinity, -Infinity, null].includes(value)) { console.warn(`A non processable value was detected : ${value}`) } return (typeof value === 'number' && isFinite(value)) ? value : 0; } function sanitize(data) { - if (Array.isArray(data)) { + if (Array.isArray(data)) { return data.map(item => sanitize(item)); } else if (typeof data === 'object' && data !== null) { let sanitizedObject = { ...data }; keys.forEach(key => { if (sanitizedObject.hasOwnProperty(key) && ![ - 'NAME', - 'name', - 'TITLE', - 'title', - 'DESCRIPTION', - 'description', - 'LABEL', - 'label', - 'TIME', + 'NAME', + 'name', + 'TITLE', + 'title', + 'DESCRIPTION', + 'description', + 'LABEL', + 'label', + 'TIME', 'time', 'PERIOD', 'period', @@ -1826,6 +1856,13 @@ export function sanitizeArray(arr, keys = []) { return sanitize(arr); } +export function setOpacity(hex, opac = 100) { + if (hex.length === 9) { + return hex.substring(0, 7) + opacity[opac] + } + return hex + opacity[opac] +} + const lib = { XMLNS, abbreviate, @@ -1866,8 +1903,10 @@ const lib = { error, functionReturnsString, generateSpiralCoordinates, + getCloserPoint, getMissingDatasetAttributes, getPalette, + getScaleFactorUsingArcSize, giftWrap, hasDeepProperty, interpolateColorHex, @@ -1884,6 +1923,7 @@ const lib = { palette, rotateMatrix, sanitizeArray, + setOpacity, shiftHue, sumByAttribute, sumSeries, diff --git a/tests/lib.test.js b/tests/lib.test.js index 98bc975a..a2bf2d6f 100644 --- a/tests/lib.test.js +++ b/tests/lib.test.js @@ -1,4 +1,4 @@ -import { expect, test, describe, vi, afterAll, beforeEach } from "vitest"; +import { expect, test, describe, vi, afterAll, beforeEach, afterEach } from "vitest"; import { abbreviate, adaptColorToBackground, @@ -28,18 +28,22 @@ import { createTSpans, createWordCloudDatasetFromPlainText, checkFormatter, + darkenHexColor, dataLabel, degreesToRadians, error, functionReturnsString, generateSpiralCoordinates, + getCloserPoint, getMissingDatasetAttributes, + getScaleFactorUsingArcSize, hasDeepProperty, - hslToRgb, + hslToRgba, interpolateColorHex, isFunction, isSafeValue, isValidUserValue, + lightenHexColor, makeDonut, makePath, matrixTimes, @@ -47,6 +51,7 @@ import { objectIsEmpty, rotateMatrix, sanitizeArray, + setOpacity, shiftHue, sumByAttribute, translateSize, @@ -304,29 +309,40 @@ describe('adaptColorToBackground', () => { describe('convertColorToHex', () => { test('returns HEX color format from RGB', () => { - expect(convertColorToHex("rgb(255,0,0)")).toBe("#ff0000"); - expect(convertColorToHex("rgb(0,255,0)")).toBe("#00ff00"); - expect(convertColorToHex('rgb(0,0,255)')).toBe("#0000ff"); - expect(convertColorToHex("rgb(0,0,0)")).toBe("#000000"); - expect(convertColorToHex("rgb(255,255,255)")).toBe("#ffffff"); + expect(convertColorToHex("rgb(255,0,0)")).toBe("#ff0000ff"); + expect(convertColorToHex("rgb(0,255,0)")).toBe("#00ff00ff"); + expect(convertColorToHex('rgb(0,0,255)')).toBe("#0000ffff"); + expect(convertColorToHex("rgb(0,0,0)")).toBe("#000000ff"); + expect(convertColorToHex("rgb(255,255,255)")).toBe("#ffffffff"); }); test('returns HEX color format from HSL', () => { - expect(convertColorToHex("hsl(0,100%,50%)")).toBe("#ff0000"); - expect(convertColorToHex("hsl(120,100%,50%)")).toBe("#00ff00"); - expect(convertColorToHex("hsl(240,100%,50%)")).toBe("#0000ff"); - expect(convertColorToHex("hsl(0,0%,0%)")).toBe("#000000"); - expect(convertColorToHex("hsl(0,0%,100%)")).toBe("#ffffff"); + expect(convertColorToHex("hsl(0,100%,50%)")).toBe("#ff0000ff"); + expect(convertColorToHex("hsl(120,100%,50%)")).toBe("#00ff00ff"); + expect(convertColorToHex("hsl(240,100%,50%)")).toBe("#0000ffff"); + expect(convertColorToHex("hsl(0,0%,0%)")).toBe("#000000ff"); + expect(convertColorToHex("hsl(0,0%,100%)")).toBe("#ffffffff"); + }); + + test('returns HEX color from an HSL passed through hslToRgba', () => { + const rgb = hslToRgba(50, 50, 50); + expect(convertColorToHex(`rgb(${rgb[0]},${rgb[1]},${rgb[2]})`)).toBe('#bfaa40ff') }); - test('returns HEX color from an HSL passed through hslToRgb', () => { - const rgb = hslToRgb(50, 50, 50); - expect(convertColorToHex(`rgb(${rgb[0]},${rgb[1]},${rgb[2]})`)).toBe('#bfaa40') - }) test('returns HEX color from a name color', () => { - expect(convertColorToHex('red')).toBe('#FF0000') - expect(convertColorToHex('RED')).toBe('#FF0000') - expect(convertColorToHex('Red')).toBe('#FF0000') + expect(convertColorToHex('red')).toBe('#FF0000ff') + expect(convertColorToHex('RED')).toBe('#FF0000ff') + expect(convertColorToHex('Red')).toBe('#FF0000ff') + }); + + test('should convert rgba to hex with alpha channel', () => { + const result = convertColorToHex('rgba(255,0,0,0.5)'); + expect(result).toBe('#ff000080') + }); + + test('should convert hsla to hex with alpha channel', () => { + const result = convertColorToHex('hsla(0, 100%, 50%, 0.5)') + expect(result).toBe('#ff000080') }) }) @@ -342,12 +358,19 @@ describe('shiftHue', () => { expect(shiftHue('#63dd67', 0.1)).toBe('#63ddb0') expect(shiftHue('#63ddb0', 0.1)).toBe('#63c1dd') expect(shiftHue('#63c1dd', 0.1)).toBe('#6378dd') + }); + + test('should return a shifted hex color with same alpha channel', () => { + expect(shiftHue('#6376DD50', 0.1)).toBe('#9963dd50') }) }) -describe('hslToRgb', () => { - test('converts hsl to RGB', () => { - expect(hslToRgb(50, 50, 50)).toStrictEqual([191, 170, 64]) +describe('hslToRgba', () => { + test('converts hsl to RGBA', () => { + expect(hslToRgba(50, 50, 50)).toStrictEqual([191, 170, 64, 1]) + }) + test('converts hsla to RGBA', () => { + expect(hslToRgba(50, 50, 50, 0.5)).toStrictEqual([191, 170, 64, 0.5]) }) }) @@ -798,6 +821,10 @@ describe('interpolateColorHex', () => { expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 80)).toBe('#cc0033') expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 90)).toBe('#e6001a') expect(interpolateColorHex("#0000FF", "#FF0000", 0, 100, 100)).toBe('#ff0000') + + expect(interpolateColorHex("#0000FF80", "#FF000080", 0, 100, 0)).toBe('#0000ff80'); + expect(interpolateColorHex("#0000FF80", "#FF000080", 0, 100, 50)).toBe('#80008080'); + expect(interpolateColorHex("#0000FF80", "#FF000080", 0, 100, 100)).toBe('#ff000080'); }) }) @@ -1129,10 +1156,10 @@ describe('convertCustomPalette', () => { expect(convertCustomPalette([])).toStrictEqual([]) }) test('returns converted named colors', () => { - expect(convertCustomPalette(['red', 'green', 'blue'])).toStrictEqual(['#FF0000', '#008000', '#0000FF']) + expect(convertCustomPalette(['red', 'green', 'blue'])).toStrictEqual(['#FF0000ff', '#008000ff', '#0000FFff']) }) test('returns converted rgb colors', () => { - expect(convertCustomPalette(['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)'])).toStrictEqual(["#ff0000", "#00ff00", "#0000ff"]) + expect(convertCustomPalette(['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)'])).toStrictEqual(["#ff0000ff", "#00ff00ff", "#0000ffff"]) }) }) @@ -1157,7 +1184,7 @@ describe('createWordCloudDatasetFromPlainText', () => { value: 1 }, { - name: 'a', + name: 'a', value: 1 } ] @@ -1353,7 +1380,7 @@ describe('createWordCloudDatasetFromPlainText', () => { value: 1 }, { - name: "ื", + name: "ื", value: 1 }, { @@ -1649,7 +1676,7 @@ describe('getPathLengthFromCoordinates', () => { test('returns a path length from coordinates', () => { expect(getPathLengthFromCoordinates(straightLine)).toBe(10); }); - + const hypothenuse = 'M 0 0 10 10'; test('returns hypothenuse length', () => { expect(getPathLengthFromCoordinates(hypothenuse)).toBe(14.142135623730951); @@ -1697,14 +1724,14 @@ describe('sumSeries', () => { test('return an array if sums', () => { expect(sumSeries(items)).toStrictEqual([6, 6, 2]); - expect(sumSeries([{series: []}])).toStrictEqual([]); + expect(sumSeries([{ series: [] }])).toStrictEqual([]); }) }) describe('checkFormatter', () => { const params = { value: 12, config: { key: 'configValue' } }; const expected = `expected${params.value}`; - + const testFunc = ({ value }) => { return `expected${value}`; }; @@ -1777,7 +1804,7 @@ describe('checkFormatter', () => { describe('applyDataLabel', () => { const params = { value: 12, config: { key: 'configValue' } }; const expected = `expected${params.value}`; - + const testFunc = ({ value }) => { return `expected${value}`; }; @@ -1857,7 +1884,7 @@ describe('hasDeepProperty', () => { attr0: { attr1: { attr2: { - attr3 : 'A' + attr3: 'A' } } } @@ -1876,7 +1903,7 @@ describe('sanitizeArray', () => { test('sanitizes an array of numbers', () => { expect(sanitizeArray(source0)).toStrictEqual([1, 2, 3, 0, 0, 0, 0]) }); - + const source1 = [{ values: [1, NaN, undefined, Infinity, -Infinity], value: [2, NaN, undefined, Infinity, -Infinity] @@ -1889,4 +1916,151 @@ describe('sanitizeArray', () => { } ]); }); +}); + +describe('lightenHexColor', () => { + test('should lighten a hex color without transparency', () => { + const result = lightenHexColor('#ff5733', 0.2); + console.log({ result }) + expect(result).toBe('#ff795c'); + }); + + test('should lighten a hex color with transparency', () => { + const result = lightenHexColor('#ff573380', 0.2); + expect(result).toBe('#ff795c80'); + }); + + test('should return a default color for invalid hex format', () => { + const result = lightenHexColor('invalid', 0.2); + expect(result).toBe('#000000'); + }); + + test('should lighten a short hex color without transparency', () => { + const result = lightenHexColor('#f53', 0.3); + expect(result).toBe('#ff8870'); + }); + + test('should lighten a short hex color with transparency', () => { + const result = lightenHexColor('#f53880', 0.3); + expect(result).toBe('#f874a6'); + }); +}); + +describe('darkenHexColor', () => { + test('should lighten a hex color without transparency', () => { + const result = darkenHexColor('#ff5733', 0.2); + console.log({ result }) + expect(result).toBe('#cc4629'); + }); + + test('should lighten a hex color with transparency', () => { + const result = darkenHexColor('#ff573380', 0.2); + expect(result).toBe('#cc462980'); + }); + + test('should return a default color for invalid hex format', () => { + const result = darkenHexColor('invalid', 0.2); + expect(result).toBe('#000000'); + }); + + test('should lighten a short hex color without transparency', () => { + const result = darkenHexColor('#f53', 0.3); + expect(result).toBe('#b33c24'); + }); + + test('should lighten a short hex color with transparency', () => { + const result = darkenHexColor('#f53880', 0.3); + expect(result).toBe('#ac275a'); + }); +}); + +describe('setOpacity', () => { + test('should set an opacity to a simple hex color', () => { + const result1 = setOpacity('#00FF00'); + expect(result1).toBe('#00FF00FF') + const result2 = setOpacity('#00FF00', 50); + expect(result2).toBe('#00FF0080') + }); + test('should override the opacity of a hex color with alpha channel', () => { + const result = setOpacity('#00FF0080', 100); + expect(result).toBe('#00FF00FF') + }) +}); + +describe('getCloserPoint', () => { + test('should move the point closer to the center given a valid arcSize', () => { + const result = getCloserPoint(100, 100, 150, 120, 10); + expect(result.x).toBeCloseTo(140.7, 1); + expect(result.y).toBeCloseTo(116.3, 1); + }); + + test('should return the same point if the point is at the center', () => { + const result = getCloserPoint(100, 100, 100, 100, 10); + expect(result.x).toBe(100); + expect(result.y).toBe(100); + }); + + test('should barely move the point if arcSize is very small', () => { + const result = getCloserPoint(100, 100, 150, 120, 0.1); + expect(result.x).toBeCloseTo(149.9, 1); + expect(result.y).toBeCloseTo(120, 1); + }); + + test('should move the point significantly if arcSize is large', () => { + const result = getCloserPoint(100, 100, 150, 120, 40); + expect(result.x).toBeCloseTo(112.9, 1); + expect(result.y).toBeCloseTo(105.1, 1); + }); + + test('should not move the point if arcSize is zero', () => { + const result = getCloserPoint(100, 100, 150, 120, 0); + expect(result.x).toBe(150); + expect(result.y).toBe(120); + }); +}); + +describe('getScaleFactorUsingArcSize', () => { + beforeEach(() => { + vi.spyOn(console, 'warn').mockImplementation(() => { }); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + test('should calculate the correct scale factor for a valid arcSize', () => { + const scaleFactor = getScaleFactorUsingArcSize(100, 100, 150, 120, 10); + expect(scaleFactor).toBeCloseTo(0.814, 3); + }); + + test('should return a scale factor close to 1 for a very small arcSize', () => { + const scaleFactor = getScaleFactorUsingArcSize(100, 100, 150, 120, 0.1); + expect(scaleFactor).toBeCloseTo(0.998, 3); + }); + + test('should return a scale factor of 1 when arcSize is 0', () => { + const scaleFactor = getScaleFactorUsingArcSize(100, 100, 150, 120, 0); + expect(scaleFactor).toBe(1); + }); + + test('should trigger a warning and return a scale factor of 0 when arcSize equals the distance', () => { + const scaleFactor = getScaleFactorUsingArcSize(100, 100, 110, 100, 10); + expect(console.warn).toHaveBeenCalledWith( + 'arcSize must be less than the distance from the point to the center' + ); + expect(scaleFactor).toBe(0); + }); + + test('should trigger a warning and return a negative scale factor when arcSize is greater than the distance', () => { + const scaleFactor = getScaleFactorUsingArcSize(100, 100, 110, 100, 20); + expect(console.warn).toHaveBeenCalledWith( + 'arcSize must be less than the distance from the point to the center' + ); + expect(scaleFactor).toBeLessThan(0); + }); + + test('should correctly calculate the scale factor for a diagonal point', () => { + const scaleFactor = getScaleFactorUsingArcSize(0, 0, 3, 4, 1); + expect(scaleFactor).toBeCloseTo(0.8, 1); + }); }); \ No newline at end of file diff --git a/tests/useNestedProp.test.js b/tests/useNestedProp.test.js index fe03827c..a63d1b8f 100644 --- a/tests/useNestedProp.test.js +++ b/tests/useNestedProp.test.js @@ -28,14 +28,14 @@ describe('useNestedProp', () => { expect(useNestedProp({ defaultConfig, userConfig })).toStrictEqual({ attr1: { - color: "#000000", + color: "#000000ff", value: 1, someDefaultObject: { defaultAttr: "default" }, }, attr2: { - color: "#FF0000" + color: "#FF0000ff" } }) }) From 89e7fee4ad93177c0108bda606d0bdb7177a7c04 Mon Sep 17 00:00:00 2001 From: graphieros Date: Sat, 9 Nov 2024 12:00:21 +0100 Subject: [PATCH 3/4] Dev environment - Update testing arena --- TestingArena/ArenaVueUi3dBar.vue | 4 ++-- TestingArena/ArenaVueUiAgePyramid.vue | 4 ++-- TestingArena/ArenaVueUiCandlestick.vue | 2 +- TestingArena/ArenaVueUiChestnut.vue | 4 ++-- TestingArena/ArenaVueUiDonut.vue | 4 ++-- TestingArena/ArenaVueUiDonutEvolution.vue | 4 ++-- TestingArena/ArenaVueUiDumbbell.vue | 4 ++-- TestingArena/ArenaVueUiFlow.vue | 4 ++-- TestingArena/ArenaVueUiGalaxy.vue | 6 +++--- TestingArena/ArenaVueUiGauge.vue | 2 +- TestingArena/ArenaVueUiHeatmap.vue | 4 ++-- TestingArena/ArenaVueUiKpi.vue | 2 +- TestingArena/ArenaVueUiMolecule.vue | 4 ++-- TestingArena/ArenaVueUiMoodRadar.vue | 2 +- TestingArena/ArenaVueUiNestedDonuts.vue | 4 ++-- TestingArena/ArenaVueUiOnion.vue | 6 +++--- .../ArenaVueUiParallelCoordinatePlot.vue | 2 +- TestingArena/ArenaVueUiQuickChart.vue | 3 ++- TestingArena/ArenaVueUiRelationCircle.vue | 2 +- TestingArena/ArenaVueUiRings.vue | 8 ++++---- TestingArena/ArenaVueUiScatter.vue | 6 +++--- TestingArena/ArenaVueUiSparkGauge.vue | 2 +- TestingArena/ArenaVueUiSparkHistogram.vue | 2 +- TestingArena/ArenaVueUiSparkStackbar.vue | 4 ++-- TestingArena/ArenaVueUiSparkTrend.vue | 2 +- TestingArena/ArenaVueUiSparkline.vue | 4 ++-- TestingArena/ArenaVueUiStackbar.vue | 5 +++-- TestingArena/ArenaVueUiStripPlot.vue | 4 ++-- TestingArena/ArenaVueUiTableHeatmap.vue | 2 +- TestingArena/ArenaVueUiTableSparkline.vue | 6 +++--- TestingArena/ArenaVueUiThermometer.vue | 4 ++-- TestingArena/ArenaVueUiTimer.vue | 6 +++--- TestingArena/ArenaVueUiTiremarks.vue | 4 ++-- TestingArena/ArenaVueUiTreemap.vue | 6 +++--- TestingArena/ArenaVueUiVerticalBar.vue | 20 +++++++++---------- TestingArena/ArenaVueUiWaffle.vue | 10 +++++----- TestingArena/ArenaVueUiWheel.vue | 4 ++-- TestingArena/ArenaVueUiWordCloud.vue | 2 +- TestingArena/ArenaVueUiXy.vue | 5 +++-- TestingArena/ArenaVueUiXyCanvas.vue | 4 ++-- 40 files changed, 90 insertions(+), 87 deletions(-) diff --git a/TestingArena/ArenaVueUi3dBar.vue b/TestingArena/ArenaVueUi3dBar.vue index a1a1e699..49ae12d6 100644 --- a/TestingArena/ArenaVueUi3dBar.vue +++ b/TestingArena/ArenaVueUi3dBar.vue @@ -92,7 +92,7 @@ const model = ref([ { key: 'style.chart.animation.use', def: true, type: 'checkbox'}, { key: 'style.chart.animation.speed', def: 1, type: 'number', min: 0.1, max: 2, step: 0.1}, { key: 'style.chart.animation.acceleration', def: 1, type: 'number', min: 0.1, max: 10, step: 0.1}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.bar.color', def: '#6376DD', type: 'color'}, { key: 'style.chart.bar.stroke', def: '#6376DD', type: 'color'}, @@ -153,7 +153,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiAgePyramid.vue b/TestingArena/ArenaVueUiAgePyramid.vue index f57d2ac5..deb138a6 100644 --- a/TestingArena/ArenaVueUiAgePyramid.vue +++ b/TestingArena/ArenaVueUiAgePyramid.vue @@ -51,7 +51,7 @@ const model = ref([ { key: 'userOptions.buttons.img', def: true, type: 'checkbox' }, { key: 'userOptions.buttons.table', def: true, type: 'checkbox' }, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' }, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.color', def: '#1A1A1A', type: 'color'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, { key: 'style.height', def: 200, type: 'number', min: 200, max: 1000}, @@ -135,7 +135,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value) diff --git a/TestingArena/ArenaVueUiCandlestick.vue b/TestingArena/ArenaVueUiCandlestick.vue index 30d7490c..73100dae 100644 --- a/TestingArena/ArenaVueUiCandlestick.vue +++ b/TestingArena/ArenaVueUiCandlestick.vue @@ -164,7 +164,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiChestnut.vue b/TestingArena/ArenaVueUiChestnut.vue index 98d8ff3a..1c2677f1 100644 --- a/TestingArena/ArenaVueUiChestnut.vue +++ b/TestingArena/ArenaVueUiChestnut.vue @@ -283,7 +283,7 @@ const model = ref([ { key: 'userOptions.buttons.table', def: true, type: 'checkbox' }, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' }, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.layout.grandTotal.show', def: true, type: 'checkbox'}, { key: 'style.chart.layout.grandTotal.fontSize', def: 20, type: 'number', min: 8, max: 48}, @@ -404,7 +404,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiDonut.vue b/TestingArena/ArenaVueUiDonut.vue index 8d0ae03a..7b000966 100644 --- a/TestingArena/ArenaVueUiDonut.vue +++ b/TestingArena/ArenaVueUiDonut.vue @@ -78,7 +78,7 @@ const model = ref([ { key: 'style.fontFamily', def: 'inherit', type: 'text', label: "fontFamily", category: 'general' }, { key: 'style.chart.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'general' }, { key: 'style.chart.gradientIntensity', def: 40, min: 0, max: 100, type: 'range', label: 'gradientIntensity', category: 'general' }, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'general' }, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'general' }, { key: 'style.chart.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'general' }, { key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox', label: 'show', category: 'labels' }, { key: 'style.chart.layout.labels.dataLabels.hideUnderValue', def: 3, type: 'number', min: 0, max: 100, label: 'hideUnderValue', category: 'labels' }, @@ -125,7 +125,7 @@ const model = ref([ { key: 'style.chart.layout.donut.useShadow', def: true, type: 'checkbox' }, { key: 'style.chart.layout.donut.shadowColor', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.legend.show', def: true, type: 'checkbox', label: 'show', category: 'legend' }, - { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'legend' }, + { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'legend' }, { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'legend' }, { key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 6, max: 42, label: 'fontSize', category: 'legend' }, { key: 'style.chart.legend.bold', def: false, type: 'checkbox', label: 'bold', category: 'legend' }, diff --git a/TestingArena/ArenaVueUiDonutEvolution.vue b/TestingArena/ArenaVueUiDonutEvolution.vue index e44aa833..4a0aaae6 100644 --- a/TestingArena/ArenaVueUiDonutEvolution.vue +++ b/TestingArena/ArenaVueUiDonutEvolution.vue @@ -35,7 +35,7 @@ const model = ref([ { key: 'userOptions.buttons.table', def: true, type: 'checkbox'}, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.layout.height', def: 316, type: 'number', min: 200, max: 800}, { key: 'style.chart.layout.width', def: 500, type: 'number', min: 300, max: 1200}, @@ -115,7 +115,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value) diff --git a/TestingArena/ArenaVueUiDumbbell.vue b/TestingArena/ArenaVueUiDumbbell.vue index 1e239323..b632411c 100644 --- a/TestingArena/ArenaVueUiDumbbell.vue +++ b/TestingArena/ArenaVueUiDumbbell.vue @@ -38,7 +38,7 @@ const model = ref([ { key: 'useAnimation', def: true, type: 'checkbox'}, { key: 'animationSpeed', def: 2, type: 'number', min: 1, max: 10}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.width', def: 600, type: 'number', min: 300, max: 1000}, { key: 'style.chart.rowHeight', def: 40, type: 'number', min: 40, max: 100}, @@ -132,7 +132,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiFlow.vue b/TestingArena/ArenaVueUiFlow.vue index bea13519..6bb910b3 100644 --- a/TestingArena/ArenaVueUiFlow.vue +++ b/TestingArena/ArenaVueUiFlow.vue @@ -32,7 +32,7 @@ const model = ref([ { key: 'userOptions.buttons.table', def: true, type: 'checkbox' }, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' }, { key: 'style.fontFamily', def: 'inherit', type: 'text' }, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' }, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' }, { key: 'style.chart.color', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100 }, { key: 'style.chart.padding.left', def: 24, type: 'number', min: 0, max: 100 }, @@ -68,7 +68,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiGalaxy.vue b/TestingArena/ArenaVueUiGalaxy.vue index 0fd1ed6b..06bb6fe2 100644 --- a/TestingArena/ArenaVueUiGalaxy.vue +++ b/TestingArena/ArenaVueUiGalaxy.vue @@ -33,7 +33,7 @@ const model = ref([ { key: 'useCssAnimation', def: true, type: 'checkbox'}, { key: 'useBlurOnHover', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.layout.arcs.strokeWidth', def: 24, type: 'number', min: 2, max: 48}, { key: 'style.chart.layout.arcs.borderWidth', def: 12, type: 'number', min: 1, max: 24}, @@ -43,7 +43,7 @@ const model = ref([ { key: 'style.chart.layout.arcs.hoverEffect.multiplicator', def: 1.1, type: 'number', min: 1, max: 2, step: 0.05}, { key: 'style.chart.layout.arcs.gradient.show', def: true, type: 'checkbox'}, { key: 'style.chart.layout.arcs.gradient.intensity', def: 30, type: 'range', min: 0, max: 100}, - { key: 'style.chart.layout.arcs.gradient.color', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.layout.arcs.gradient.color', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'}, { key: 'style.chart.layout.labels.dataLabels.suffix', def: 'S', type: 'text'}, { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'}, @@ -96,7 +96,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value) diff --git a/TestingArena/ArenaVueUiGauge.vue b/TestingArena/ArenaVueUiGauge.vue index 45c27693..bd7d2784 100644 --- a/TestingArena/ArenaVueUiGauge.vue +++ b/TestingArena/ArenaVueUiGauge.vue @@ -62,7 +62,7 @@ const model = ref([ { key: 'userOptions.buttons.img', def: true, type: 'checkbox'}, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.animation.use', def: true, type: 'checkbox'}, { key: 'style.chart.animation.speed', def: 1, type: 'range', min: 0, max: 100}, diff --git a/TestingArena/ArenaVueUiHeatmap.vue b/TestingArena/ArenaVueUiHeatmap.vue index d098b3cd..390250bc 100644 --- a/TestingArena/ArenaVueUiHeatmap.vue +++ b/TestingArena/ArenaVueUiHeatmap.vue @@ -81,7 +81,7 @@ const model = ref([ { key: 'userOptions.buttons.table', def: true, type: 'checkbox' }, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' }, { key: 'style.fontFamily', def: "inherit", type: 'text'}, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.color', def: '#1A1A1A', type: 'color'}, { key: 'style.layout.padding.top', def: 36, type: 'number', min: 0, max: 100}, { key: 'style.layout.padding.right', def: 12, type: 'number', min: 0, max: 100}, @@ -164,7 +164,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiKpi.vue b/TestingArena/ArenaVueUiKpi.vue index 9456b5a2..398db0ba 100644 --- a/TestingArena/ArenaVueUiKpi.vue +++ b/TestingArena/ArenaVueUiKpi.vue @@ -19,7 +19,7 @@ const config = ref({ title: 'Lorem ipsum dolor sit amet', analogDigits: { show: true - } + }, }) diff --git a/TestingArena/ArenaVueUiMolecule.vue b/TestingArena/ArenaVueUiMolecule.vue index 0c981556..ae52c348 100644 --- a/TestingArena/ArenaVueUiMolecule.vue +++ b/TestingArena/ArenaVueUiMolecule.vue @@ -152,7 +152,7 @@ const model = ref([ { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'}, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.nodes.stroke', def: '#FFFFFF', type: 'color'}, { key: 'style.chart.nodes.strokeHovered', def: '#1A1A1A', type: 'color'}, @@ -198,7 +198,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiMoodRadar.vue b/TestingArena/ArenaVueUiMoodRadar.vue index 7f50b4da..af9d6922 100644 --- a/TestingArena/ArenaVueUiMoodRadar.vue +++ b/TestingArena/ArenaVueUiMoodRadar.vue @@ -84,7 +84,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiNestedDonuts.vue b/TestingArena/ArenaVueUiNestedDonuts.vue index b3903ddf..978c2018 100644 --- a/TestingArena/ArenaVueUiNestedDonuts.vue +++ b/TestingArena/ArenaVueUiNestedDonuts.vue @@ -66,7 +66,7 @@ const model = ref([ { key: 'style.fontFamily', def: 'inherit', type: 'text'}, { key: 'style.chart.useGradient', def: true, type: 'checkbox'}, { key: 'style.chart.gradientIntensity', def: 40, type: 'range', min: 0, max: 100}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox'}, { key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'}, @@ -147,7 +147,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value) diff --git a/TestingArena/ArenaVueUiOnion.vue b/TestingArena/ArenaVueUiOnion.vue index 8e8a1a0a..238e1212 100644 --- a/TestingArena/ArenaVueUiOnion.vue +++ b/TestingArena/ArenaVueUiOnion.vue @@ -71,11 +71,11 @@ const model = ref([ { key: 'useStartAnimation', def: true, type: 'checkbox'}, { key: 'useBlurOnHover', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text', label: "fontFamily", category: 'general' }, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'general' }, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'general' }, { key: 'style.chart.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'general' }, { key: 'style.chart.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'general' }, { key: 'style.chart.gradientIntensity', def: 20, min: 10, max: 40, type: 'range', label: 'gradientIntensity', category: 'general' }, - { key: 'style.chart.layout.gutter.color', def: '#e1e5e8', type: 'color'}, + { key: 'style.chart.layout.gutter.color', def: '#e1e5e820', type: 'color'}, { key: 'style.chart.layout.gutter.width', def: 0.62, type: 'range', min: 0.1, max: 1, step: 0.01}, { key: 'style.chart.layout.track.width', def: 0.62, type: 'range', min: 0.1, max: 1, step: 0.01}, { key: 'style.chart.layout.labels.show', def: true, type: 'checkbox'}, @@ -143,7 +143,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue index 515d2a5c..ad0c3d93 100644 --- a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue +++ b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue @@ -63,7 +63,7 @@ const model = ref([ { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'useCssAnimation', def: true, type: 'checkbox' }, { key: 'style.fontFamily', def: 'inherit', type: 'text' }, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' }, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' }, { key: 'style.chart.color', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.height', def: 600, type: 'number', min: 300, max: 1000 }, { key: 'style.chart.width', def: 1000, type: 'number', min: 300, max: 1500 }, diff --git a/TestingArena/ArenaVueUiQuickChart.vue b/TestingArena/ArenaVueUiQuickChart.vue index c6b1fb2a..d83bb8d9 100644 --- a/TestingArena/ArenaVueUiQuickChart.vue +++ b/TestingArena/ArenaVueUiQuickChart.vue @@ -107,6 +107,7 @@ function alterDataset() { const selectedSerie = ref('shortArray'); const model = ref([ + { key: 'backgroundColor', def: '#FFFFFF', type: 'color'}, { key: 'responsive', def: false, type: 'checkbox'}, { key: 'userOptionsButtons.pdf', def: true, type: 'checkbox'}, { key: 'userOptionsButtons.img', def: true, type: 'checkbox'}, @@ -202,7 +203,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiRelationCircle.vue b/TestingArena/ArenaVueUiRelationCircle.vue index 7b73a17d..8f9e0503 100644 --- a/TestingArena/ArenaVueUiRelationCircle.vue +++ b/TestingArena/ArenaVueUiRelationCircle.vue @@ -121,7 +121,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { return { diff --git a/TestingArena/ArenaVueUiRings.vue b/TestingArena/ArenaVueUiRings.vue index 6355f367..b5b66e26 100644 --- a/TestingArena/ArenaVueUiRings.vue +++ b/TestingArena/ArenaVueUiRings.vue @@ -11,7 +11,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena() const dataset = ref([ { name: "Serie 1", - values: [100] + values: [100], }, { name: "Serie 2", @@ -19,7 +19,7 @@ const dataset = ref([ }, { name: "Serie 3", - values: [300, 1] + values: [300, 1], }, { name: "Serie 4", @@ -74,7 +74,7 @@ const model = ref([ { key: 'useCssAnimation', def: true, type: 'checkbox'}, { key: 'useBlurOnHover', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'}, { key: 'style.chart.layout.labels.dataLabels.suffix', def: '2', type: 'text'}, @@ -137,7 +137,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[2]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiScatter.vue b/TestingArena/ArenaVueUiScatter.vue index ea590b28..f21bb41c 100644 --- a/TestingArena/ArenaVueUiScatter.vue +++ b/TestingArena/ArenaVueUiScatter.vue @@ -106,7 +106,7 @@ const model = ref([ { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'useCssAnimation', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: "inherit", type: 'text'}, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.color', def: '#1A1A1A', type: 'color'}, { key: 'style.layout.height', def: 316, type: 'number', min: 100, max: 1000}, { key: 'style.layout.width', def: 512, type: 'number', min: 100, max: 1000}, @@ -191,7 +191,7 @@ const model = ref([ { key: 'style.title.subtitle.fontSize', def: 16, type: 'range', min: 8, max: 48}, { key: 'style.title.subtitle.bold', def: false, type: 'checkbox'}, { key: 'style.legend.show', def: true, type: 'checkbox' }, - { key: 'style.legend.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.legend.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.legend.color', def: '#1A1A1A', type: 'color'}, { key: 'style.legend.fontSize', def: 14, type: 'number', min: 6, max: 42 }, { key: 'style.legend.bold', def: false, type: 'checkbox'}, @@ -236,7 +236,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { diff --git a/TestingArena/ArenaVueUiSparkGauge.vue b/TestingArena/ArenaVueUiSparkGauge.vue index 131b4134..b08aad0d 100644 --- a/TestingArena/ArenaVueUiSparkGauge.vue +++ b/TestingArena/ArenaVueUiSparkGauge.vue @@ -57,7 +57,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiSparkHistogram.vue b/TestingArena/ArenaVueUiSparkHistogram.vue index 435f358e..25f181bc 100644 --- a/TestingArena/ArenaVueUiSparkHistogram.vue +++ b/TestingArena/ArenaVueUiSparkHistogram.vue @@ -203,7 +203,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[2]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiSparkStackbar.vue b/TestingArena/ArenaVueUiSparkStackbar.vue index da7e2e6e..ec11ef08 100644 --- a/TestingArena/ArenaVueUiSparkStackbar.vue +++ b/TestingArena/ArenaVueUiSparkStackbar.vue @@ -61,7 +61,7 @@ const model = ref([ { key: 'style.animation.animationFrames', def: 60, type: 'number', min: 0, max: 300}, { key: 'style.bar.gradient.show', def: true, type: 'checkbox'}, { key: 'style.bar.gradient.intensity', def: 40, type: 'range', min: 0, max: 100}, - { key: 'style.bar.gradient.underlayerColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.bar.gradient.underlayerColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.legend.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']}, { key: 'style.legend.show', def: true, type: 'checkbox'}, { key: 'style.legend.fontSize', def: 12, type: 'number', min: 8, max: 48}, @@ -98,7 +98,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[2]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiSparkTrend.vue b/TestingArena/ArenaVueUiSparkTrend.vue index a7dc02e4..a946226e 100644 --- a/TestingArena/ArenaVueUiSparkTrend.vue +++ b/TestingArena/ArenaVueUiSparkTrend.vue @@ -78,7 +78,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiSparkline.vue b/TestingArena/ArenaVueUiSparkline.vue index 2a0be3a8..049e2f9f 100644 --- a/TestingArena/ArenaVueUiSparkline.vue +++ b/TestingArena/ArenaVueUiSparkline.vue @@ -126,7 +126,7 @@ const model = ref([ { key: 'style.chartWidth', def: 400, type: 'number', min: 100, max: 500}, { key: 'style.animation.show', def: true, type: 'checkbox'}, { key: 'style.animation.animationFrames', def: 360, type: 'number', min: 0, max: 1000}, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, { key: 'style.line.color', def: '#3366CC', type: 'color'}, { key: 'style.line.strokeWidth', def: 3, type: 'number', min: 0, max: 20}, @@ -174,7 +174,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue index a904a5d2..40c8d0e0 100644 --- a/TestingArena/ArenaVueUiStackbar.vue +++ b/TestingArena/ArenaVueUiStackbar.vue @@ -21,6 +21,7 @@ const dataset = ref([ { name: "Serie 1", series: [10, 20, 30], + color: "rgba(255,0,0,0.5)" }, { name: "Serie 2", @@ -54,7 +55,7 @@ const model = ref([ { key: 'responsive', def: false, type: 'checkbox'}, { key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']}, { key: 'useCssAnimation', def: true, type: 'checkbox'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF00', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.height', def: 500, type: 'number', min: 200, max: 1000}, { key: 'style.chart.width', def: 800, type: 'number', min: 200, max: 1000}, @@ -91,7 +92,7 @@ const model = ref([ { key: 'style.chart.tooltip.borderRadius', def: 4, type: 'number', min: 0, max: 24}, { key: 'style.chart.tooltip.borderColor', def: '#E1E5E8', type: 'color'}, { key: 'style.chart.tooltip.borderWidth', def: 1, type: 'number', min: 0, max: 12}, - { key: 'style.chart.tooltip.backgroundOpacity', def: 100, type: 'range', min: 0, max: 100}, + { key: 'style.chart.tooltip.backgroundOpacity', def: 20, type: 'range', min: 0, max: 100}, { key: 'style.chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']}, { key: 'style.chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 64}, { key: 'style.chart.tooltip.showValue', def: true, type: 'checkbox'}, diff --git a/TestingArena/ArenaVueUiStripPlot.vue b/TestingArena/ArenaVueUiStripPlot.vue index 2641ef04..3d4a9256 100644 --- a/TestingArena/ArenaVueUiStripPlot.vue +++ b/TestingArena/ArenaVueUiStripPlot.vue @@ -98,7 +98,7 @@ const model = ref([ { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'}, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.height', def: 600, type: 'number', min: 200, max: 1000}, { key: 'style.chart.stripWidth', def: 120, type: 'number', min: 48, max: 300}, @@ -188,7 +188,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value) diff --git a/TestingArena/ArenaVueUiTableHeatmap.vue b/TestingArena/ArenaVueUiTableHeatmap.vue index 27c1adbd..623630ff 100644 --- a/TestingArena/ArenaVueUiTableHeatmap.vue +++ b/TestingArena/ArenaVueUiTableHeatmap.vue @@ -73,7 +73,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[2]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value) diff --git a/TestingArena/ArenaVueUiTableSparkline.vue b/TestingArena/ArenaVueUiTableSparkline.vue index b7645b5b..9afeb2f4 100644 --- a/TestingArena/ArenaVueUiTableSparkline.vue +++ b/TestingArena/ArenaVueUiTableSparkline.vue @@ -75,13 +75,13 @@ const model = ref([ { key: 'title.subtitle.color', def: '#1A1A1A', type: 'color'}, { key: 'title.subtitle.fontSize', def: 14, type: 'number', min: 8, max: 48}, { key: 'title.subtitle.bold', def: false, type: 'checkbox'}, - { key: 'thead.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'thead.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'thead.color', def: '#1A1A1A', type: 'color'}, { key: 'thead.fontSize', def: 14, type: 'number', min: 8, max: 24}, { key: 'thead.outline', def: 'none', type: 'text'}, { key: 'thead.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']}, { key: 'thead.bold', def: false, type: 'checkbox'}, - { key: 'tbody.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'tbody.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'tbody.color', def: '#1A1A1A', type: 'color'}, { key: 'tbody.fontSize', def: 14, type: 'number', min: 8, max: 24}, { key: 'tbody.outline', def: 'none', type: 'text'}, @@ -97,7 +97,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[2]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { return { diff --git a/TestingArena/ArenaVueUiThermometer.vue b/TestingArena/ArenaVueUiThermometer.vue index 02ab884a..3608f6ad 100644 --- a/TestingArena/ArenaVueUiThermometer.vue +++ b/TestingArena/ArenaVueUiThermometer.vue @@ -45,7 +45,7 @@ const model = ref([ { key: 'userOptions.buttons.img', def: true, type: 'checkbox'}, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.height', def: 360, type: 'number', min: 100, max: 1000}, { key: 'style.chart.thermometer.width', def: 48, type: 'number', min: 12, max: 64}, @@ -87,7 +87,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiTimer.vue b/TestingArena/ArenaVueUiTimer.vue index 4d8a5c35..a2a4387c 100644 --- a/TestingArena/ArenaVueUiTimer.vue +++ b/TestingArena/ArenaVueUiTimer.vue @@ -8,7 +8,7 @@ import convertArrayToObject from "./convertModel"; const model = ref([ { key: 'responsive', def: false, type: 'checkbox'}, { key: 'type', def: 'stopwatch', type: 'select', options: ['stopwatch']}, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.height', def: 300, type: 'number', min: 100, max: 1000}, { key: 'style.width', def: 300, type: 'number', min: 100, max: 1000}, { key: 'style.title.text', def: 'Title', type: 'text'}, @@ -24,7 +24,7 @@ const model = ref([ { key: 'stopwatch.cycleSeconds', def: 5, type: 'number', min: 1, max: 60}, { key: 'stopwatch.track.radiusRatio', def: 1, type: 'range', min: 0.3, max: 1, step: 0.01}, { key: 'stopwatch.track.stroke', def: '#e1e5e8', type: "color"}, - { key: 'stopwatch.track.fill', def: '#FFFFFF', type: "color"}, + { key: 'stopwatch.track.fill', def: '#FFFFFF20', type: "color"}, { key: 'stopwatch.track.strokeWidth', def: 2, type: 'number', min: 0, max: 24 }, { key: 'stopwatch.tracker.radiusRatio', def: 1, type: 'range', min: 0.1, max: 2, step: 0.01}, { key: 'stopwatch.tracker.stroke', def: '#FFFFFF', type: 'color'}, @@ -43,7 +43,7 @@ const model = ref([ { key: 'stopwatch.label.fontSize', def: 24, type: 'number', min: 8, max: 42}, { key: 'stopwatch.label.color', def: '#1A1A1A', type: 'color'}, { key: 'stopwatch.label.bold', def: false, type: 'checkbox'}, - { key: 'stopwatch.legend.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'stopwatch.legend.backgroundColor', def: '#FFFFFF20s', type: 'color'}, { key: 'stopwatch.legend.buttons.start', def: true, type: 'checkbox'}, { key: 'stopwatch.legend.buttons.pause', def: true, type: 'checkbox'}, { key: 'stopwatch.legend.buttons.reset', def: true, type: 'checkbox'}, diff --git a/TestingArena/ArenaVueUiTiremarks.vue b/TestingArena/ArenaVueUiTiremarks.vue index 0c93c267..737703fd 100644 --- a/TestingArena/ArenaVueUiTiremarks.vue +++ b/TestingArena/ArenaVueUiTiremarks.vue @@ -41,7 +41,7 @@ const model = ref([ { key: 'userOptions.buttons.img', def: true, type: 'checkbox'}, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.animation.use', def: true, type: 'checkbox'}, { key: 'style.chart.animation.speed', def: 0.5, type: 'number', min: 0, max: 2, step: 0.01}, @@ -83,7 +83,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[1]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); diff --git a/TestingArena/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue index bc9f4ad7..617fb7f7 100644 --- a/TestingArena/ArenaVueUiTreemap.vue +++ b/TestingArena/ArenaVueUiTreemap.vue @@ -125,7 +125,7 @@ function alterDataset() { const alternateConfig = ref({ style: { chart: { - backgroundColor: '#FF0000', + backgroundColor: '#FF000020', title: { text: 'Alternate' } @@ -142,7 +142,7 @@ const model = ref([ { key: 'userOptions.buttons.table', def: true, type: 'checkbox' }, { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' }, { key: 'style.fontFamily', def: 'inherit', type: 'text' }, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.height', def: 500, type: 'number', min: 100, max: 1000}, { key: 'style.chart.width', def: 800, type: 'number', min: 100, max: 1500}, @@ -188,7 +188,7 @@ const model = ref([ { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'}, { key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 48}, { key: 'style.chart.tooltip.roundingValue', def: 1, type: 'number', min: 0, max: 12}, - { key: 'style.chart.tooltip.backgroundOpacity', def: 100, type: 'range', min: 0, max: 100}, + { key: 'style.chart.tooltip.backgroundOpacity', def: 20, type: 'range', min: 0, max: 100}, { key: 'style.chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']}, { key: 'style.chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 48}, diff --git a/TestingArena/ArenaVueUiVerticalBar.vue b/TestingArena/ArenaVueUiVerticalBar.vue index 5dab38eb..7b950972 100644 --- a/TestingArena/ArenaVueUiVerticalBar.vue +++ b/TestingArena/ArenaVueUiVerticalBar.vue @@ -111,7 +111,7 @@ const model = ref([ { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'}, { key: 'useCssAnimation', def: true, type: 'checkbox'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.layout.bars.sort', def: 'desc', type: 'select', options: ['asc', 'desc']}, { key: 'style.chart.layout.bars.useStroke', def: false, type: 'checkbox'}, @@ -208,7 +208,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[3]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { const c = convertArrayToObject(model.value); @@ -316,12 +316,12 @@ function selectLegend(legend) { {{ datapoint.name }} : {{ percentage }} - - - -