diff --git a/src/visualizations/config/adapters/dhis_highcharts/index.js b/src/visualizations/config/adapters/dhis_highcharts/index.js index f9e97469b..b39a263c2 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/index.js +++ b/src/visualizations/config/adapters/dhis_highcharts/index.js @@ -244,7 +244,5 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) { // force apply extra config Object.assign(config, extraConfig) - console.log('CONFIG', objectClean(config)) - return objectClean(config) } diff --git a/src/visualizations/config/adapters/index.js b/src/visualizations/config/adapters/index.js index e567b54d1..7b49438ee 100644 --- a/src/visualizations/config/adapters/index.js +++ b/src/visualizations/config/adapters/index.js @@ -4,5 +4,4 @@ import dhis_highcharts from './dhis_highcharts/index.js' export default { dhis_highcharts, dhis_dhis, - dhis_singleValue: dhis_dhis, } diff --git a/src/visualizations/config/generators/dhis/singleValue.js b/src/visualizations/config/generators/dhis/singleValue.js index 07c57854f..25ec5bab9 100644 --- a/src/visualizations/config/generators/dhis/singleValue.js +++ b/src/visualizations/config/generators/dhis/singleValue.js @@ -151,7 +151,6 @@ const generateValueSVG = ({ // embed icon to allow changing color // (elements with fill need to use "currentColor" for this to work) const iconSvgNode = document.createElementNS(svgNS, 'svg') - console.log('old', iconSize) iconSvgNode.setAttribute('viewBox', '0 0 48 48') iconSvgNode.setAttribute('width', iconSize) iconSvgNode.setAttribute('height', iconSize) @@ -468,7 +467,6 @@ export default function ( parentEl, { dashboard, legendSets, fontStyle, noData, legendOptions, icon } ) { - console.log('CONFIG OLD', config) const legendSet = legendOptions && legendSets[0] const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value) diff --git a/src/visualizations/config/generators/highcharts/index.js b/src/visualizations/config/generators/highcharts/index.js index 07fca2f68..f3222b257 100644 --- a/src/visualizations/config/generators/highcharts/index.js +++ b/src/visualizations/config/generators/highcharts/index.js @@ -72,13 +72,12 @@ function drawLegendSymbolWrap() { ) } -export function highcharts(config, el) { +export default function (config, el) { if (config) { config.chart.renderTo = el || config.chart.renderTo // silence warning about accessibility config.accessibility = { enabled: false } - console.log('Homt ie hier?', config) if (config.lang) { H.setOptions({ lang: config.lang, @@ -90,36 +89,3 @@ export function highcharts(config, el) { return new H.Chart(config) } } - -export function singleValue(config, el, extraOptions) { - return H.chart(el, { - accessibility: { enabled: false }, - chart: { - backgroundColor: 'transparent', - events: { - load: function () { - renderSingleValueSvg(config, el, extraOptions, this) - }, - }, - animation: false, - }, - credits: { enabled: false }, - exporting: { - enabled: true, - error: (options, error) => { - console.log('options', options) - console.log(error) - }, - chartOptions: { - title: { - text: null, - }, - }, - }, - lang: { - noData: null, - }, - noData: {}, - title: null, - }) -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/constants.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/constants.js deleted file mode 100644 index 06fd79fd0..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/constants.js +++ /dev/null @@ -1,38 +0,0 @@ -// TODO: remove this, sch thing it should not be needed -export const svgNS = 'http://www.w3.org/2000/svg' -// multiply text width with this factor -// to get very close to actual text width -// nb: dependent on viewbox etc -export const ACTUAL_TEXT_WIDTH_FACTOR = 0.9 - -// multiply value text size with this factor -// to get very close to the actual number height -// as numbers don't go below the baseline like e.g. "j" and "g" -export const ACTUAL_NUMBER_HEIGHT_FACTOR = 0.67 - -// do not allow text width to exceed this threshold -// a threshold >1 does not really make sense but text width vs viewbox is complicated -export const TEXT_WIDTH_CONTAINER_WIDTH_FACTOR = 1.3 - -// do not allow text size to exceed this -export const TEXT_SIZE_CONTAINER_HEIGHT_FACTOR = 0.6 -export const TEXT_SIZE_MAX_THRESHOLD = 200 - -// multiply text size with this factor -// to get an appropriate letter spacing -export const LETTER_SPACING_TEXT_SIZE_FACTOR = (1 / 35) * -1 -export const LETTER_SPACING_MIN_THRESHOLD = -6 -export const LETTER_SPACING_MAX_THRESHOLD = -1 - -// fixed top margin above title/subtitle -export const TOP_MARGIN_FIXED = 16 - -// multiply text size with this factor -// to get an appropriate sub text size -export const SUB_TEXT_SIZE_FACTOR = 0.5 -export const SUB_TEXT_SIZE_MIN_THRESHOLD = 26 -export const SUB_TEXT_SIZE_MAX_THRESHOLD = 40 - -// multiply text size with this factor -// to get an appropriate icon padding -export const ICON_PADDING_FACTOR = 0.3 diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateDVItem.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateDVItem.js deleted file mode 100644 index 2291d341d..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateDVItem.js +++ /dev/null @@ -1,134 +0,0 @@ -import { - defaultFontStyle, - FONT_STYLE_OPTION_BOLD, - FONT_STYLE_OPTION_FONT_SIZE, - FONT_STYLE_OPTION_ITALIC, - FONT_STYLE_OPTION_TEXT_ALIGN, - FONT_STYLE_OPTION_TEXT_COLOR, - FONT_STYLE_VISUALIZATION_SUBTITLE, - FONT_STYLE_VISUALIZATION_TITLE, - mergeFontStyleWithDefault, -} from '../../../../../modules/fontStyle.js' -import { TOP_MARGIN_FIXED } from './constants.js' -import { generateValueSVG } from './generateValueSVG.js' -import { getTextAnchorFromTextAlign } from './getTextAnchorFromTextAlign.js' -import { getXFromTextAlign } from './getXFromTextAlign.js' - -export const generateDVItem = ( - config, - { - renderer, - width, - height, - valueColor, - noData, - backgroundColor, - titleColor, - fontStyle, - icon, - } -) => { - backgroundColor = 'red' - if (backgroundColor) { - renderer - .rect(0, 0, width, height) - .attr({ fill: backgroundColor, width: '100%', height: '100%' }) - .add() - } - - // TITLE - const titleFontStyle = mergeFontStyleWithDefault( - fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_TITLE], - FONT_STYLE_VISUALIZATION_TITLE - ) - - const titleYPosition = - TOP_MARGIN_FIXED + - parseInt(titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]) + - 'px' - - const titleFontSize = `${titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px` - - renderer - .text(config.title) - .attr({ - x: getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]), - y: titleYPosition, - 'text-anchor': getTextAnchorFromTextAlign( - titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN] - ), - 'font-size': titleFontSize, - 'font-weight': titleFontStyle[FONT_STYLE_OPTION_BOLD] - ? FONT_STYLE_OPTION_BOLD - : 'normal', - 'font-style': titleFontStyle[FONT_STYLE_OPTION_ITALIC] - ? FONT_STYLE_OPTION_ITALIC - : 'normal', - 'data-test': 'visualization-title', - fill: - titleColor && - titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] === - defaultFontStyle[FONT_STYLE_VISUALIZATION_TITLE][ - FONT_STYLE_OPTION_TEXT_COLOR - ] - ? titleColor - : titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR], - }) - .add() - - // SUBTITLE - const subtitleFontStyle = mergeFontStyleWithDefault( - fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], - FONT_STYLE_VISUALIZATION_SUBTITLE - ) - const subtitleFontSize = `${subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px` - - if (config.subtitle) { - renderer - .text(config.subtitle) - .attr({ - x: getXFromTextAlign( - subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN] - ), - y: titleYPosition, - dy: `${subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE] + 10}`, - 'text-anchor': getTextAnchorFromTextAlign( - subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN] - ), - 'font-size': subtitleFontSize, - 'font-weight': subtitleFontStyle[FONT_STYLE_OPTION_BOLD] - ? FONT_STYLE_OPTION_BOLD - : 'normal', - 'font-style': subtitleFontStyle[FONT_STYLE_OPTION_ITALIC] - ? FONT_STYLE_OPTION_ITALIC - : 'normal', - fill: - titleColor && - subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] === - defaultFontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE][ - FONT_STYLE_OPTION_TEXT_COLOR - ] - ? titleColor - : subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR], - 'data-test': 'visualization-subtitle', - }) - .add() - } - - generateValueSVG({ - renderer, - formattedValue: config.formattedValue, - subText: config.subText, - valueColor, - textColor: titleColor, - noData, - icon, - containerWidth: width, - containerHeight: height, - topMargin: - TOP_MARGIN_FIXED + - ((config.title ? parseInt(titleFontSize) : 0) + - (config.subtitle ? parseInt(subtitleFontSize) : 0)) * - 2.5, - }) -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js deleted file mode 100644 index 5f365f0b5..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js +++ /dev/null @@ -1,135 +0,0 @@ -import { colors } from '@dhis2/ui' -import { - svgNS, - LETTER_SPACING_MAX_THRESHOLD, - LETTER_SPACING_MIN_THRESHOLD, - LETTER_SPACING_TEXT_SIZE_FACTOR, - SUB_TEXT_SIZE_FACTOR, - SUB_TEXT_SIZE_MAX_THRESHOLD, - SUB_TEXT_SIZE_MIN_THRESHOLD, -} from './constants.js' -import { - getIconPadding, - getTextHeightForNumbers, - getTextSize, - getTextWidth, -} from './textSize.js' - -const parser = new DOMParser() - -export const generateValueSVG = ({ - renderer, - formattedValue, - subText, - valueColor, - textColor, - icon, - noData, - containerWidth, - containerHeight, - topMargin = 0, -}) => { - const showIcon = icon && formattedValue !== noData.text - const group = renderer - .g('value') - .css({ - transform: 'translate(50%, 50%)', - }) - .add() - - const textSize = getTextSize( - formattedValue, - containerWidth, - containerHeight, - showIcon - ) - - const textWidth = getTextWidth(formattedValue, `${textSize}px Roboto`) - - const iconSize = textSize - - const subTextSize = - textSize * SUB_TEXT_SIZE_FACTOR > SUB_TEXT_SIZE_MAX_THRESHOLD - ? SUB_TEXT_SIZE_MAX_THRESHOLD - : textSize * SUB_TEXT_SIZE_FACTOR < SUB_TEXT_SIZE_MIN_THRESHOLD - ? SUB_TEXT_SIZE_MIN_THRESHOLD - : textSize * SUB_TEXT_SIZE_FACTOR - - let fillColor = colors.grey900 - - if (valueColor) { - fillColor = valueColor - } else if (formattedValue === noData.text) { - fillColor = colors.grey600 - } - - const letterSpacing = Math.round(textSize * LETTER_SPACING_TEXT_SIZE_FACTOR) - - const formattedValueText = renderer - .text(formattedValue) - .attr({ - 'font-size': textSize, - 'font-weight': '300', - 'letter-spacing': - letterSpacing < LETTER_SPACING_MIN_THRESHOLD - ? LETTER_SPACING_MIN_THRESHOLD - : letterSpacing > LETTER_SPACING_MAX_THRESHOLD - ? LETTER_SPACING_MAX_THRESHOLD - : letterSpacing, - 'text-anchor': 'middle', - width: '100%', - x: showIcon ? `${iconSize / 2 + getIconPadding(textSize / 2)}` : 0, - y: topMargin / 2 + getTextHeightForNumbers(textSize) / 2, - fill: fillColor, - 'data-test': 'visualization-primary-value', - }) - .add(group) - - // show icon if configured in maintenance app - if (showIcon) { - const svgIconDocument = parser.parseFromString(icon, 'image/svg+xml') - const iconElHeight = - svgIconDocument.documentElement.getAttribute('height') - const iconElWidth = - svgIconDocument.documentElement.getAttribute('width') - const iconGroup = renderer - .g('icon') - .attr('data-test', 'visualization-icon') - .css({ - color: fillColor, - }) - /* Force the group element to have the same dimensions as the original - * SVG image by adding this rect. This ensures the icon has the intended - * whitespace around it and makes scaling and translating easier. */ - renderer.rect(0, 0, iconElWidth, iconElHeight).add(iconGroup) - - Array.from(svgIconDocument.documentElement.children).forEach((node) => - iconGroup.element.appendChild(node) - ) - const formattedValueTextBox = formattedValueText.getBBox() - const scaleFactor = textSize / iconElHeight - const textHeight = formattedValueTextBox.height / 2 - const iconHeight = (iconElHeight * scaleFactor) / 2 - const translateY = - (formattedValueTextBox.y + (textHeight - iconHeight)) / scaleFactor - - iconGroup - .css({ - transform: `scale(${scaleFactor}) translate(-98px, ${translateY}px)`, - }) - .add(group) - } - - if (subText) { - renderer - .text(subText) - .attr({ - 'text-anchor': 'middle', - 'font-size': subTextSize, - y: iconSize / 2 + topMargin / 2, - dy: subTextSize * 1.7, - fill: textColor, - }) - .add(group) - } -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVGOLD.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVGOLD.js deleted file mode 100644 index 1a36f7eda..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVGOLD.js +++ /dev/null @@ -1,135 +0,0 @@ -import { colors } from '@dhis2/ui' -import { - svgNS, - LETTER_SPACING_MAX_THRESHOLD, - LETTER_SPACING_MIN_THRESHOLD, - LETTER_SPACING_TEXT_SIZE_FACTOR, - SUB_TEXT_SIZE_FACTOR, - SUB_TEXT_SIZE_MAX_THRESHOLD, - SUB_TEXT_SIZE_MIN_THRESHOLD, -} from './constants.js' -import { - getIconPadding, - getTextHeightForNumbers, - getTextSize, - getTextWidth, -} from './textSize.js' - -export const generateValueSVG = ({ - renderer, - formattedValue, - subText, - valueColor, - textColor, - icon, - noData, - containerWidth, - containerHeight, - topMargin = 0, -}) => { - const showIcon = icon && formattedValue !== noData.text - - const textSize = getTextSize( - formattedValue, - containerWidth, - containerHeight, - showIcon - ) - - const textWidth = getTextWidth(formattedValue, `${textSize}px Roboto`) - - const iconSize = textSize - - const subTextSize = - textSize * SUB_TEXT_SIZE_FACTOR > SUB_TEXT_SIZE_MAX_THRESHOLD - ? SUB_TEXT_SIZE_MAX_THRESHOLD - : textSize * SUB_TEXT_SIZE_FACTOR < SUB_TEXT_SIZE_MIN_THRESHOLD - ? SUB_TEXT_SIZE_MIN_THRESHOLD - : textSize * SUB_TEXT_SIZE_FACTOR - - const svgValue = document.createElementNS(svgNS, 'svg') - svgValue.setAttribute('viewBox', `0 0 ${containerWidth} ${containerHeight}`) - svgValue.setAttribute('width', '50%') - svgValue.setAttribute('height', '50%') - svgValue.setAttribute('x', '50%') - svgValue.setAttribute('y', '50%') - svgValue.setAttribute('style', 'overflow: visible') - - let fillColor = colors.grey900 - - if (valueColor) { - fillColor = valueColor - } else if (formattedValue === noData.text) { - fillColor = colors.grey600 - } - - // show icon if configured in maintenance app - if (showIcon) { - // embed icon to allow changing color - // (elements with fill need to use "currentColor" for this to work) - const iconSvgNode = document.createElementNS(svgNS, 'svg') - console.log('old', iconSize) - iconSvgNode.setAttribute('viewBox', '0 0 48 48') - iconSvgNode.setAttribute('width', iconSize) - iconSvgNode.setAttribute('height', iconSize) - iconSvgNode.setAttribute('y', (iconSize / 2 - topMargin / 2) * -1) - iconSvgNode.setAttribute( - 'x', - `-${(iconSize + getIconPadding(textSize) + textWidth) / 2}` - ) - iconSvgNode.setAttribute('style', `color: ${fillColor}`) - iconSvgNode.setAttribute('data-test', 'visualization-icon') - - const parser = new DOMParser() - const svgIconDocument = parser.parseFromString(icon, 'image/svg+xml') - - Array.from(svgIconDocument.documentElement.children).forEach((node) => - iconSvgNode.appendChild(node) - ) - - svgValue.appendChild(iconSvgNode) - } - - const letterSpacing = Math.round(textSize * LETTER_SPACING_TEXT_SIZE_FACTOR) - - const textNode = document.createElementNS(svgNS, 'text') - textNode.setAttribute('font-size', textSize) - textNode.setAttribute('font-weight', '300') - textNode.setAttribute( - 'letter-spacing', - letterSpacing < LETTER_SPACING_MIN_THRESHOLD - ? LETTER_SPACING_MIN_THRESHOLD - : letterSpacing > LETTER_SPACING_MAX_THRESHOLD - ? LETTER_SPACING_MAX_THRESHOLD - : letterSpacing - ) - textNode.setAttribute('text-anchor', 'middle') - textNode.setAttribute( - 'x', - showIcon ? `${(iconSize + getIconPadding(textSize)) / 2}` : 0 - ) - textNode.setAttribute( - 'y', - topMargin / 2 + getTextHeightForNumbers(textSize) / 2 - ) - textNode.setAttribute('fill', fillColor) - textNode.setAttribute('data-test', 'visualization-primary-value') - - textNode.appendChild(document.createTextNode(formattedValue)) - - svgValue.appendChild(textNode) - - if (subText) { - const subTextNode = document.createElementNS(svgNS, 'text') - subTextNode.setAttribute('text-anchor', 'middle') - subTextNode.setAttribute('font-size', subTextSize) - subTextNode.setAttribute('y', iconSize / 2 + topMargin / 2) - subTextNode.setAttribute('dy', subTextSize * 1.7) - subTextNode.setAttribute('fill', textColor) - subTextNode.appendChild(document.createTextNode(subText)) - - svgValue.appendChild(subTextNode) - } - - renderer.box.appendChild(svgValue) -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/getTextAnchorFromTextAlign.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/getTextAnchorFromTextAlign.js deleted file mode 100644 index 5d66ba074..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/getTextAnchorFromTextAlign.js +++ /dev/null @@ -1,17 +0,0 @@ -import { - TEXT_ALIGN_LEFT, - TEXT_ALIGN_CENTER, - TEXT_ALIGN_RIGHT, -} from '../../../../../modules/fontStyle.js' - -export const getTextAnchorFromTextAlign = (textAlign) => { - switch (textAlign) { - default: - case TEXT_ALIGN_LEFT: - return 'start' - case TEXT_ALIGN_CENTER: - return 'middle' - case TEXT_ALIGN_RIGHT: - return 'end' - } -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/getXFromTextAlign.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/getXFromTextAlign.js deleted file mode 100644 index d9383b4e9..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/getXFromTextAlign.js +++ /dev/null @@ -1,17 +0,0 @@ -import { - TEXT_ALIGN_LEFT, - TEXT_ALIGN_CENTER, - TEXT_ALIGN_RIGHT, -} from '../../../../../modules/fontStyle.js' - -export const getXFromTextAlign = (textAlign) => { - switch (textAlign) { - default: - case TEXT_ALIGN_LEFT: - return '1%' - case TEXT_ALIGN_CENTER: - return '50%' - case TEXT_ALIGN_RIGHT: - return '99%' - } -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js deleted file mode 100644 index b4cfd8842..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js +++ /dev/null @@ -1,76 +0,0 @@ -import { colors } from '@dhis2/ui' -import { - getColorByValueFromLegendSet, - LEGEND_DISPLAY_STYLE_FILL, -} from '../../../../../modules/legends.js' -import { shouldUseContrastColor } from '../../../adapters/dhis_highcharts/customSVGOptions/singleValue/config/shouldUseContrastColor.js' -import { generateDVItem } from './generateDVItem.js' - -export default function ( - config, - parentEl, - { dashboard, legendSets, fontStyle, noData, legendOptions, icon }, - chart -) { - const renderer = chart.renderer - const legendSet = legendOptions && legendSets[0] - const legendColor = - legendSet && getColorByValueFromLegendSet(legendSet, config.value) - let valueColor, titleColor, backgroundColor - if (legendColor) { - if (legendOptions.style === LEGEND_DISPLAY_STYLE_FILL) { - backgroundColor = legendColor - valueColor = titleColor = - shouldUseContrastColor(legendColor) && colors.white - } else { - valueColor = legendColor - } - } - - parentEl.style.overflow = 'hidden' - parentEl.style.display = 'flex' - parentEl.style.justifyContent = 'center' - - // We need the inner width so borders etc are excluded - const width = parentEl.clientWidth - const height = parentEl.clientHeight - - const svgContainer = renderer.box - svgContainer.setAttribute('viewBox', `0 0 ${width} ${height}`) - svgContainer.setAttribute('data-test', 'visualization-container') - - chart.setSize(dashboard ? '100%' : width, dashboard ? '100%' : height) - - // if (dashboard) { - // parentEl.style.borderRadius = '3px' - - // return generateDashboardItem(config, { - // svgContainer, - // width, - // height, - // valueColor, - // backgroundColor, - // noData, - // icon, - // ...(legendOptions.style === LEGEND_DISPLAY_STYLE_FILL && - // legendColor && - // shouldUseContrastColor(legendColor) - // ? { titleColor: colors.white } - // : {}), - // }) - // } else { - parentEl.style.height = `100%` - - return generateDVItem(config, { - renderer, - width, - height, - valueColor, - backgroundColor, - titleColor, - noData, - icon, - fontStyle, - }) - // } -} diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/textSize.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/textSize.js deleted file mode 100644 index a94ad7266..000000000 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/textSize.js +++ /dev/null @@ -1,52 +0,0 @@ -// Compute text width before rendering - -import { - ACTUAL_NUMBER_HEIGHT_FACTOR, - ACTUAL_TEXT_WIDTH_FACTOR, - ICON_PADDING_FACTOR, - TEXT_SIZE_CONTAINER_HEIGHT_FACTOR, - TEXT_SIZE_MAX_THRESHOLD, - TEXT_WIDTH_CONTAINER_WIDTH_FACTOR, -} from './constants.js' - -// Not exactly precise but close enough -export const getTextWidth = (text, font) => { - const canvas = document.createElement('canvas') - const context = canvas.getContext('2d') - context.font = font - return Math.round( - context.measureText(text).width * ACTUAL_TEXT_WIDTH_FACTOR - ) -} - -export const getTextHeightForNumbers = (textSize) => - textSize * ACTUAL_NUMBER_HEIGHT_FACTOR - -export const getIconPadding = (textSize) => - Math.round(textSize * ICON_PADDING_FACTOR) - -export const getTextSize = ( - formattedValue, - containerWidth, - containerHeight, - showIcon -) => { - let size = Math.min( - Math.round(containerHeight * TEXT_SIZE_CONTAINER_HEIGHT_FACTOR), - TEXT_SIZE_MAX_THRESHOLD - ) - - const widthThreshold = Math.round( - containerWidth * TEXT_WIDTH_CONTAINER_WIDTH_FACTOR - ) - - const textWidth = - getTextWidth(formattedValue, `${size}px Roboto`) + - (showIcon ? getIconPadding(size) : 0) - - if (textWidth > widthThreshold) { - size = Math.round(size * (widthThreshold / textWidth)) - } - - return size -} diff --git a/src/visualizations/config/generators/index.js b/src/visualizations/config/generators/index.js index 290cac165..bc7a75872 100644 --- a/src/visualizations/config/generators/index.js +++ b/src/visualizations/config/generators/index.js @@ -1,8 +1,7 @@ import dhis from './dhis/index.js' -import { highcharts, singleValue } from './highcharts/index.js' +import highcharts from './highcharts/index.js' export default { highcharts, dhis, - singleValue, } diff --git a/src/visualizations/store/adapters/index.js b/src/visualizations/store/adapters/index.js index e567b54d1..7b49438ee 100644 --- a/src/visualizations/store/adapters/index.js +++ b/src/visualizations/store/adapters/index.js @@ -4,5 +4,4 @@ import dhis_highcharts from './dhis_highcharts/index.js' export default { dhis_highcharts, dhis_dhis, - dhis_singleValue: dhis_dhis, }