@limetech/lime-elements 40.21.1 → 40.22.0

package/dist/cjs/limel-chart.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-BlsqxTB1.js');
-var translations = require('./translations-CqJEWcfw.js');
+var translations = require('./translations-JLP5icQ9.js');
 var keyboardNavigation = require('./keyboard-navigation-VyqkMDKy.js');
-require('./language-v-MMS6ym.js');
+var language = require('./language-s0bKUCvO.js');
 require('./keycodes-BQ_AERli.js');
 
 /*! *****************************************************************************
@@ -50174,8 +50174,9 @@ function install(registers) {
   registers.registerPainter('svg', SVGPainter);
 }
 
-const PERCENT = 100;
+const PERCENT$1 = 100;
 const STEP_COUNT = 10;
+const DAY = 24 * 60 * 60 * 1000;
 /**
  * The most steps that an `axisIncrement` may divide a value axis into.
  */
@@ -50278,6 +50279,114 @@ function getAxisRange(items, maxValue, axisIncrement) {
         : getNiceStep(span);
     return roundOutwards(minRange, finalMaxRange, increment);
 }
+/**
+ * Whether `value` is a date in milliseconds that `Date` can hold. A date
+ * in nanoseconds is not, and neither is a date given as text.
+ * @param value - the value to check
+ */
+function isDate(value) {
+    return (typeof value === 'number' && Number.isFinite(new Date(value).getTime()));
+}
+/**
+ * The range of an axis of dates, in milliseconds: from the start of the
+ * earliest day to the latest date, or to `maxValue` when that is set, as an
+ * axis of numbers ends at `maxValue`. An end during a day is moved to the
+ * end of that day. Unlike an axis of numbers, it does not reach down to
+ * zero, which would be 1970, and values that are not dates are left out.
+ * Its increment is a day, though `getDateTicks` decides what the axis
+ * marks.
+ * @param values - the dates on the axis
+ * @param maxValue - the requested upper bound, if any
+ */
+function getDateRange(values, maxValue) {
+    const dates = values.filter((value) => isDate(value));
+    const start = new Date(dates.length > 0 ? Math.min(...dates) : Date.now());
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(isDate(maxValue) ? maxValue : Math.max(start.getTime(), ...dates));
+    if (end.getTime() <= start.getTime()) {
+        end.setTime(addDays(start, 1).getTime());
+    }
+    else if (end.getTime() > startOfDay(end)) {
+        end.setTime(addDays(new Date(startOfDay(end)), 1).getTime());
+    }
+    return {
+        minValue: start.getTime(),
+        maxValue: end.getTime(),
+        totalRange: end.getTime() - start.getTime(),
+        increment: DAY,
+    };
+}
+const DAYS_IN_MONTH = 30.44;
+const DAYS_IN_YEAR = 365.25;
+const DATE_STEP_COUNT = 6;
+const dayStep = (count) => ({
+    unit: 'day',
+    days: count,
+    first: (date) => date,
+    next: (date) => addDays(date, count),
+});
+const weekStep = (count) => ({
+    unit: 'day',
+    days: 7 * count,
+    first: (date) => addDays(date, (8 - date.getDay()) % 7),
+    next: (date) => addDays(date, 7 * count),
+});
+const monthStep = (count) => ({
+    unit: 'month',
+    days: DAYS_IN_MONTH * count,
+    first: (date) => {
+        let month = date.getDate() === 1 ? date : getFirstOfMonth(date, 1);
+        while (month.getMonth() % count !== 0) {
+            month = getFirstOfMonth(month, 1);
+        }
+        return month;
+    },
+    next: (date) => getFirstOfMonth(date, count),
+});
+const yearStep = (count) => ({
+    unit: 'year',
+    days: DAYS_IN_YEAR * count,
+    first: (date) => {
+        let year = date.getFullYear();
+        if (date.getTime() > createDate(year, 0, 1).getTime()) {
+            year += 1;
+        }
+        return createDate(Math.ceil(year / count) * count, 0, 1);
+    },
+    next: (date) => createDate(date.getFullYear() + count, 0, 1),
+});
+const DATE_STEPS = [
+    dayStep(1),
+    dayStep(2),
+    weekStep(1),
+    weekStep(2),
+    monthStep(1),
+    monthStep(3),
+    monthStep(6),
+    yearStep(1),
+    yearStep(2),
+    yearStep(5),
+    yearStep(10),
+];
+/**
+ * The dates to mark on an axis of dates: days, Mondays, or the first days
+ * of months, quarters, half years or years, whichever divides the axis
+ * into at most about six steps. Dates take more room than numbers, so
+ * they get fewer steps.
+ * @param range - the range of the axis, from `getDateRange`
+ * @returns the dates to mark, and whether they are days, months or years
+ */
+function getDateTicks(range) {
+    var _a;
+    const days = (range.maxValue - range.minValue) / DAY;
+    const decades = days / DAYS_IN_YEAR / 10;
+    const step = (_a = DATE_STEPS.find((candidate) => days / candidate.days <= DATE_STEP_COUNT)) !== null && _a !== void 0 ? _a : yearStep(10 * Math.ceil(decades / DATE_STEP_COUNT));
+    const ticks = [];
+    for (let date = step.first(new Date(range.minValue)); date.getTime() <= range.maxValue; date = step.next(date)) {
+        ticks.push(date.getTime());
+    }
+    return { values: ticks, unit: step.unit };
+}
 /**
  * The range of a chart whose items are parts of one whole: `maxValue`
  * when set, otherwise the combined item values or range extents. The value
@@ -50318,26 +50427,7 @@ function getScatterRanges(items) {
  * @param whole - the range from `getWholeRange`
  */
 function getShare(item, whole) {
-    return (getValueSpan(item) / whole.totalRange) * PERCENT;
-}
-/**
- * The item's value as text: its `formattedValue` when set, otherwise its
- * value, range, or scatter point.
- * @param item - the item
- * @param type - the chart type
- */
-function formatValue(item, type) {
-    const { value, formattedValue } = item;
-    if (formattedValue) {
-        return formattedValue;
-    }
-    if (Array.isArray(value)) {
-        if (type === 'scatter') {
-            return `(${value[0]}, ${value[1]})`;
-        }
-        return `${value[0]} — ${value[1]}`;
-    }
-    return `${value}`;
+    return (getValueSpan(item) / whole.totalRange) * PERCENT$1;
 }
 function isUsableStep(step, span) {
     return step > 0 && span / step <= MAX_AXIS_STEPS;
@@ -50357,6 +50447,29 @@ function getZeroAnchoredRange(values) {
     const maxValue = Math.max(0, ...values);
     return roundOutwards(minValue, maxValue, getNiceStep(maxValue - minValue));
 }
+function addDays(date, days) {
+    return createDate(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function getFirstOfMonth(date, monthsLater) {
+    return createDate(date.getFullYear(), date.getMonth() + monthsLater, 1);
+}
+/**
+ * The start of a day in local time. Unlike `new Date(year, month, day)`, it
+ * keeps the years 0 to 99 rather than reading them as 1900 to 1999, see
+ * https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-makefullyear
+ * @param year - the full year
+ * @param month - the month, from 0 for January
+ * @param day - the day of the month
+ */
+function createDate(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month, day);
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+function startOfDay(date) {
+    return new Date(date).setHours(0, 0, 0, 0);
+}
 function roundOutwards(minValue, maxValue, increment) {
     const lowerEnd = Math.floor(minValue / increment) * increment;
     const upperEnd = Math.ceil(maxValue / increment) * increment;
@@ -50368,13 +50481,313 @@ function roundOutwards(minValue, maxValue, increment) {
     };
 }
 
+const FALLBACK_LOCALE = 'en';
+const PERCENT = 100;
+/**
+ * The largest value on an axis from which its values are shortened,
+ * such as `1.2M` for 1 200 000.
+ */
+const SHORTEN_FROM = 10000;
+/**
+ * The most decimals `Intl` writes in every browser.
+ */
+const MAX_DECIMALS = 20;
+/**
+ * The most significant digits `Intl` writes.
+ */
+const MAX_SIGNIFICANT_DIGITS = 21;
+/**
+ * Up to three decimals, and six significant digits below one, so `0.0004`
+ * is not written as `0`.
+ */
+const NUMBERS = {
+    options: { maximumFractionDigits: 3 },
+    small: { maximumSignificantDigits: 6 },
+    smallBelow: 1,
+};
+/**
+ * Up to one decimal, and two significant digits below 1 %, so `0.0004` is
+ * written as `0.04%` rather than `0%`.
+ */
+const PERCENTAGES = {
+    options: { style: 'percent', maximumFractionDigits: 1 },
+    small: { style: 'percent', maximumSignificantDigits: 2 },
+    smallBelow: 0.01,
+};
+const SHARE_OPTIONS = {
+    style: 'percent',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+};
+/**
+ * The ticks of an axis of dates that are not known, whose dates are all
+ * written with their year.
+ */
+const UNKNOWN_DATE_TICKS = { values: [], unit: 'day' };
+const locales = new Map();
+const numberFormats = new Map();
+const currencyCodes = new Map();
+const dateFormats = new Map();
+/**
+ * The item's value as text: its `formattedValue` when set, otherwise its
+ * value, range, or scatter point, written in the chart's language and
+ * value format.
+ * @param item - the item
+ * @param style - how the chart writes values
+ */
+function formatValue(item, style) {
+    const { value, formattedValue } = item;
+    if (formattedValue) {
+        return formattedValue;
+    }
+    const write = getValueWriter(style);
+    if (!Array.isArray(value)) {
+        return write(value);
+    }
+    const [first, second] = value.map((part) => write(part));
+    if (style.type === 'scatter') {
+        return writePoint(first, second);
+    }
+    const [start, end] = [getMinimumValue(item), getMaximumValue(item)];
+    if (style.valueFormat === 'date' && isDate(start) && isDate(end)) {
+        return getDateFormat(style.language).formatRange(start, end);
+    }
+    return `${first} — ${second}`;
+}
+/**
+ * Writes the values of an axis in the chart's language and value format,
+ * with as many decimals as the step between them has. Amounts leave out
+ * their currency, which the item values and tooltips show. On an axis
+ * that reaches 10 000 or more, every number is shortened, such as `1.2M`,
+ * so the values stay short and alike. Dates are written by what the axis
+ * steps through: days, months or years, with the year on the first date
+ * and on the first date of each new year.
+ * @param range - the range of the axis
+ * @param style - how the chart writes values
+ * @param dates - the dates an axis of dates marks
+ */
+function getAxisValueFormatter(range, style, dates) {
+    const locale = getLocale(style.language);
+    if (style.valueFormat === 'date') {
+        return getDateAxisFormatter(locale, dates);
+    }
+    if (style.valueFormat === 'percent') {
+        const percentages = getNumberFormat(locale, {
+            style: 'percent',
+            maximumFractionDigits: countDecimals(range.increment * PERCENT),
+        });
+        return (value) => percentages.format(value);
+    }
+    const largest = Math.max(Math.abs(range.minValue), Math.abs(range.maxValue));
+    const numbers = getNumberFormat(locale, largest >= SHORTEN_FROM
+        ? {
+            notation: 'compact',
+            maximumSignificantDigits: countSignificantDigits(largest, range.increment),
+        }
+        : { maximumFractionDigits: countDecimals(range.increment) });
+    return (value) => numbers.format(value);
+}
+/**
+ * An item's share of the whole as a percentage with two decimals, such as
+ * `25.00%`, written in the chart's language.
+ * @param share - the share, in percent
+ * @param language - the language of the chart
+ */
+function formatShare(share, language) {
+    return getNumberFormat(getLocale(language), SHARE_OPTIONS).format(share / PERCENT);
+}
+/**
+ * Whether `currency` can be written as one: a three-letter code such as
+ * `SEK`.
+ * @param currency - the currency of the chart
+ */
+function isCurrencyCode(currency) {
+    let valid = currencyCodes.get(currency);
+    if (valid === undefined) {
+        valid = canWriteAmountsIn(currency);
+        currencyCodes.set(currency, valid);
+    }
+    return valid;
+}
+function canWriteAmountsIn(currency) {
+    try {
+        getNumberFormat(FALLBACK_LOCALE, { style: 'currency', currency });
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * Whether values can be written in `language`. When they cannot, they are
+ * written in English.
+ * @param language - the language of the chart
+ */
+function canWriteIn(language) {
+    return findLocale(language) !== undefined;
+}
+function getValueWriter(style) {
+    if (style.valueFormat === 'date') {
+        const dates = getDateFormat(style.language);
+        return (value) => (isDate(value) ? dates.format(value) : `${value}`);
+    }
+    const numbers = getValueFormat(style);
+    return (value) => numbers.format(value);
+}
+/**
+ * Writes the dates on an axis by what it steps through: day and month for
+ * days and weeks, the month for months, and the year for years. The first
+ * date, and the first date of each new year, also get their year, except
+ * January among months, which is written as its year alone.
+ * @param locale - the locale of the chart
+ * @param ticks - the dates the axis marks
+ */
+function getDateAxisFormatter(locale, ticks = UNKNOWN_DATE_TICKS) {
+    const years = getDateTimeFormat(locale, { year: 'numeric' });
+    if (ticks.unit === 'year') {
+        return (value) => years.format(value);
+    }
+    const parts = ticks.unit === 'month'
+        ? { month: 'short' }
+        : { day: 'numeric', month: 'short' };
+    const dates = getDateTimeFormat(locale, parts);
+    const datesWithYear = getDateTimeFormat(locale, Object.assign(Object.assign({}, parts), { year: 'numeric' }));
+    return (value) => {
+        if (!isFirstOfItsYear(value, ticks.values)) {
+            return dates.format(value);
+        }
+        return ticks.unit === 'month' && new Date(value).getMonth() === 0
+            ? years.format(value)
+            : datesWithYear.format(value);
+    };
+}
+/**
+ * Whether `value` is the first of `ticks` in its year. A date that is not
+ * one of them counts as the first, so that it gets its year.
+ * @param value - the date
+ * @param ticks - the dates an axis marks
+ */
+function isFirstOfItsYear(value, ticks) {
+    const index = ticks.indexOf(value);
+    return (index <= 0 ||
+        new Date(ticks[index - 1]).getFullYear() !==
+            new Date(value).getFullYear());
+}
+function getDateFormat(language) {
+    return getDateTimeFormat(getLocale(language), { dateStyle: 'medium' });
+}
+function getValueFormat(style) {
+    const locale = getLocale(style.language);
+    if (style.valueFormat === 'percent') {
+        return getNumberWriter(locale, PERCENTAGES);
+    }
+    if (style.valueFormat === 'currency' && isCurrencyCode(style.currency)) {
+        return getNumberFormat(locale, {
+            style: 'currency',
+            currency: style.currency,
+            trailingZeroDisplay: 'stripIfInteger',
+        });
+    }
+    return getNumberWriter(locale, NUMBERS);
+}
+/**
+ * The two values of a scatter point, separated by a semicolon when either
+ * of them has a comma in it, such as `(1,5; 2,5)` in Swedish.
+ * @param first - the first value, as text
+ * @param second - the second value, as text
+ */
+function writePoint(first, second) {
+    const separator = `${first}${second}`.includes(',') ? '; ' : ', ';
+    return `(${first}${separator}${second})`;
+}
+function countDecimals(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(MAX_DECIMALS, Math.max(0, -getLowestDigit(value)));
+}
+/**
+ * How many significant digits the values of an axis need for every step
+ * between them to show, such as four for `1.025M` on an axis that steps
+ * by 25 000 up to 2 000 000.
+ * @param largest - the largest value on the axis, ignoring its sign
+ * @param increment - the step between the values
+ */
+function countSignificantDigits(largest, increment) {
+    if (!Number.isFinite(increment)) {
+        return MAX_SIGNIFICANT_DIGITS;
+    }
+    const digits = Math.floor(Math.log10(largest)) - getLowestDigit(increment);
+    return Math.min(MAX_SIGNIFICANT_DIGITS, Math.max(1, digits + 1));
+}
+/**
+ * The power of ten of the last digit of `value` that is not zero, such as
+ * 3 for 25 000 and -2 for 0.25.
+ * @param value - a finite number
+ */
+function getLowestDigit(value) {
+    var _a, _b;
+    const [digits, exponent] = Number(value.toPrecision(12))
+        .toExponential()
+        .split('e', 2);
+    const decimals = (_b = (_a = digits.split('.', 2)[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return Number(exponent) - decimals;
+}
+function getNumberWriter(locale, style) {
+    const numbers = getNumberFormat(locale, style.options);
+    const small = getNumberFormat(locale, style.small);
+    return {
+        format: (value) => value !== 0 && Math.abs(value) < style.smallBelow
+            ? small.format(value)
+            : numbers.format(value),
+    };
+}
+/**
+ * Making an `Intl.NumberFormat` costs far more than using one, and values
+ * are written on every render, so each one is made once.
+ * @param locale - the locale to write in
+ * @param options - how to write the numbers
+ */
+function getNumberFormat(locale, options) {
+    const key = `${locale} ${JSON.stringify(options)}`;
+    let format = numberFormats.get(key);
+    if (!format) {
+        format = new Intl.NumberFormat(locale, options);
+        numberFormats.set(key, format);
+    }
+    return format;
+}
+function getDateTimeFormat(locale, options) {
+    const key = `${locale} ${JSON.stringify(options)}`;
+    let format = dateFormats.get(key);
+    if (!format) {
+        format = new Intl.DateTimeFormat(locale, options);
+        dateFormats.set(key, format);
+    }
+    return format;
+}
+/**
+ * The locale to write values in: the chart's language when `Intl` can
+ * write in it, otherwise English.
+ * @param language - the language of the chart
+ */
+function getLocale(language) {
+    var _a;
+    return (_a = findLocale(language)) !== null && _a !== void 0 ? _a : FALLBACK_LOCALE;
+}
+function findLocale(language$1) {
+    if (!locales.has(language$1)) {
+        locales.set(language$1, language.getSupportedLocale(language$1));
+    }
+    return locales.get(language$1);
+}
+
 const DOT_SIZE = 8;
 const LINE_DOT_SIZE = 6;
 const CONNECTOR_WIDTH = 2;
 const DIMMED_OPACITY = 0.4;
 const AREA_OPACITY = 0.4;
 const PADDING = 8;
-const PERCENT_DECIMALS = 2;
 const NPS_MIN = -100;
 const NPS_MAX = 100;
 const NPS_START_ANGLE = 200;
@@ -50464,8 +50877,8 @@ function getItemLabel(settings, index) {
         return item.text;
     }
     const whole = getWholeRange(settings.items, settings.maxValue);
-    const share = getShare(item, whole).toFixed(PERCENT_DECIMALS);
-    return `${item.text} (${share}%)`;
+    const share = formatShare(getShare(item, whole), settings.language);
+    return `${item.text} (${share})`;
 }
 /**
  * The tooltip of an item, as HTML: its label and its value.
@@ -50477,7 +50890,7 @@ function getTooltip(settings, index) {
     if (!item) {
         return '';
     }
-    return [getItemLabel(settings, index), formatValue(item, settings.type)]
+    return [getItemLabel(settings, index), formatValue(item, settings)]
         .map((text) => encodeHTML(text))
         .join('<br/>');
 }
@@ -50506,12 +50919,17 @@ function drawSeries(settings, theme, itemSpace) {
 }
 function drawOnAxes(settings, theme, itemSpace) {
     const { items, orientation } = settings;
-    const range = getAxisRange(items, settings.maxValue, settings.axisIncrement);
+    const range = settings.valueFormat === 'date'
+        ? getDateRange(items.flatMap((item) => [
+            getMinimumValue(item),
+            getMaximumValue(item),
+        ]), settings.maxValue)
+        : getAxisRange(items, settings.maxValue, settings.axisIncrement);
     const itemTextAxis = getItemTextAxis(settings);
     const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
             itemSpace &&
             getItemTextLayout(itemTextAxis, itemSpace))), axisTick: hidden, axisLine: { lineStyle: { color: theme.axisLineColor } } }), getAxisName(settings, settings.itemsLabel, theme));
-    const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), theme);
+    const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
     const { series, seriesIndex } = getAxisSeries(settings, theme);
     const option = {
         grid: getGrid(theme),
@@ -50674,10 +51092,15 @@ function getRangeStarts(items) {
 }
 function drawScatter(settings, theme) {
     const { items } = settings;
-    const ranges = getScatterRanges(items);
+    const ranges = settings.valueFormat === 'date'
+        ? {
+            x: getDateRange(items.map((item) => getXValue(item))),
+            y: getDateRange(items.map((item) => getYValue(item))),
+        }
+        : getScatterRanges(items);
     const landscape = settings.orientation === 'landscape';
-    const firstAxis = getValueAxis(ranges.x, getAxisName(settings, settings.itemsLabel, theme), theme);
-    const secondAxis = getValueAxis(ranges.y, getAxisName(settings, settings.valuesLabel, theme), theme);
+    const firstAxis = getValueAxis(ranges.x, getAxisName(settings, settings.itemsLabel, theme), settings, theme);
+    const secondAxis = getValueAxis(ranges.y, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
     const scatter = {
         type: 'scatter',
         symbolSize: theme.scatterItemSize,
@@ -50899,8 +51322,10 @@ function getGrid(theme) {
         borderWidth: 0,
     };
 }
-function getValueAxis(range, name, theme) {
-    return Object.assign({ type: 'value', min: range.minValue, max: range.maxValue, interval: range.increment, axisLabel: { show: true, color: theme.textColor }, axisLine: { lineStyle: { color: theme.axisLineColor } }, splitLine: { lineStyle: { color: theme.axisLineColor } } }, name);
+function getValueAxis(range, name, settings, theme) {
+    const dates = settings.valueFormat === 'date' && getDateTicks(range);
+    const ticks = dates && { customValues: dates.values };
+    return Object.assign(Object.assign(Object.assign({ type: 'value', min: range.minValue, max: range.maxValue, interval: dates ? undefined : range.increment, axisLabel: Object.assign({ show: true, color: theme.textColor, formatter: getAxisValueFormatter(range, settings, dates || undefined) }, ticks) }, (ticks && { axisTick: ticks })), { axisLine: { lineStyle: { color: theme.axisLineColor } }, splitLine: { lineStyle: { color: theme.axisLineColor } } }), name);
 }
 function getAxisName(settings, name, theme) {
     if (!settings.displayAxisLabels) {
@@ -50913,7 +51338,7 @@ function getAxisName(settings, name, theme) {
     };
 }
 function getValueLabel(settings, theme) {
-    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type) });
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings) });
 }
 function getLabelStyle(theme) {
     return { color: theme.textColor, textBorderWidth: 0 };
@@ -50924,7 +51349,7 @@ function getPointLabel(settings, item) {
         parts.push(item.text);
     }
     if (settings.displayItemValue) {
-        parts.push(formatValue(item, settings.type));
+        parts.push(formatValue(item, settings));
     }
     return parts.join(' ');
 }
@@ -51100,8 +51525,8 @@ const Chart = class {
         index.registerInstance(this, hostRef);
         this.interact = index.createEvent(this, "interact", 7);
         /**
-         * Defines the language for translations.
-         * Will translate the translatable strings on the components.
+         * Defines the language for translations, and for the way values are
+         * written, such as `1 234,5` in Swedish.
          */
         this.language = 'en';
         /**
@@ -51141,6 +51566,16 @@ const Chart = class {
          * Does not have any effect on chart types which generate circular forms.
          */
         this.orientation = 'landscape';
+        /**
+         * Defines how values are written: as numbers, as percentages where
+         * `0.25` is `25 %`, as amounts of `currency`, or as dates. With `date`,
+         * each value is a date in milliseconds since 1970, and the value axis
+         * steps through days, weeks, months or years. The axes, the values
+         * shown with `displayItemValue`, the tooltips, and the screen reader
+         * table all follow it, in the chart's `language`. An item's
+         * `formattedValue` is shown as it is.
+         */
+        this.valueFormat = 'number';
         /**
          * Indicates whether the chart is in a loading state.
          */
@@ -51150,6 +51585,7 @@ const Chart = class {
          */
         this.focusedIndex = 0;
         this.themeMayHaveChanged = false;
+        this.warnings = new Map();
         this.invalidColors = new Set();
         this.setPlot = (element) => {
             this.plot = element;
@@ -51214,9 +51650,14 @@ const Chart = class {
         };
     }
     componentWillLoad() {
-        this.warnAboutAxisIncrement();
         this.warnAboutOldTypeName();
     }
+    componentWillRender() {
+        this.warnOnChange('axisIncrement', this.getAxisIncrementWarning());
+        this.warnOnChange('language', this.getLanguageWarning());
+        this.warnOnChange('currency', this.getCurrencyWarning());
+        this.warnOnChange('items', this.getDateWarning());
+    }
     connectedCallback() {
         this.draw();
     }
@@ -51233,25 +51674,60 @@ const Chart = class {
         (_c = this.themeReader) === null || _c === void 0 ? void 0 : _c.dispose();
         this.themeReader = undefined;
     }
-    warnAboutAxisIncrement() {
-        const warning = this.getAxisIncrementWarning();
-        if (warning && warning !== this.axisIncrementWarning) {
+    warnOnChange(prop, warning) {
+        if (warning && warning !== this.warnings.get(prop)) {
             console.warn(warning);
         }
-        this.axisIncrementWarning = warning;
+        this.warnings.set(prop, warning);
     }
     warnAboutOldTypeName() {
         if (this.type === 'stacked-bar') {
             console.warn('limel-chart: the type `stacked-bar` is now called `proportion-bar`. It draws the same chart, but please use the new name.');
         }
     }
+    getLanguageWarning() {
+        if (canWriteIn(this.language)) {
+            return;
+        }
+        return `limel-chart: \`language\` must be one that this browser can write values in, such as \`sv\`, but was ${JSON.stringify(this.language)}. Writing the values in English instead.`;
+    }
+    getCurrencyWarning() {
+        if (this.valueFormat !== 'currency' || isCurrencyCode(this.currency)) {
+            return;
+        }
+        return `limel-chart: \`currency\` must be a three-letter code such as \`SEK\` when \`valueFormat\` is \`currency\`, but was ${JSON.stringify(this.currency)}. Writing the values as numbers instead.`;
+    }
+    getDateWarning() {
+        var _a;
+        if (this.valueFormat !== 'date') {
+            return;
+        }
+        const wrong = ((_a = this.items) !== null && _a !== void 0 ? _a : [])
+            .flatMap((item) => [item.value].flat())
+            .find((value) => !isDate(value));
+        if (wrong === undefined) {
+            return;
+        }
+        const shown = typeof wrong === 'number' ? wrong : JSON.stringify(wrong);
+        return `limel-chart: with \`valueFormat\` \`date\`, each value must be a date in milliseconds since 1970, as \`Date.getTime()\` gives, but was ${shown}. Showing it as it is.`;
+    }
+    get valueStyle() {
+        return {
+            type: this.chartType,
+            language: this.language,
+            valueFormat: this.valueFormat,
+            currency: this.currency,
+        };
+    }
     get chartType() {
         return this.type === 'stacked-bar' ? 'proportion-bar' : this.type;
     }
     getAxisIncrementWarning() {
         var _a;
         const increment = this.axisIncrement;
-        if (increment === undefined || increment === null) {
+        if (increment === undefined ||
+            increment === null ||
+            this.valueFormat === 'date') {
             return;
         }
         if (increment <= 0 || Number.isNaN(increment)) {
@@ -51291,15 +51767,10 @@ const Chart = class {
     renderItems() {
         var _a, _b;
         const tabStop = keyboardNavigation.findTabStop((_a = this.items) !== null && _a !== void 0 ? _a : [], this.focusedIndex);
-        return (_b = this.items) === null || _b === void 0 ? void 0 : _b.map((item, index$1) => (index.h("tr", { "data-index": index$1, "aria-description": this.getRowDescription(index$1), tabIndex: index$1 === tabStop ? 0 : -1, role: item.clickable ? 'button' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("td", null, item.text), index.h("td", null, formatValue(item, this.chartType)))));
+        return (_b = this.items) === null || _b === void 0 ? void 0 : _b.map((item, index$1) => (index.h("tr", { "data-index": index$1, "aria-description": this.getRowDescription(index$1), tabIndex: index$1 === tabStop ? 0 : -1, role: item.clickable ? 'button' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("td", null, item.text), index.h("td", null, formatValue(item, this.valueStyle)))));
     }
     getRowDescription(index) {
-        const label = getItemLabel({
-            items: this.items,
-            type: this.chartType,
-            maxValue: this.maxValue,
-            displayItemPercentage: this.displayItemPercentage,
-        }, index);
+        const label = getItemLabel(Object.assign(Object.assign({}, this.valueStyle), { items: this.items, maxValue: this.maxValue, displayItemPercentage: this.displayItemPercentage }), index);
         return label === this.items[index].text ? undefined : label;
     }
     draw() {
@@ -51422,25 +51893,13 @@ const Chart = class {
     }
     getSettings() {
         var _a;
-        return {
-            items: ((_a = this.items) !== null && _a !== void 0 ? _a : []).map((item) => ({
+        return Object.assign(Object.assign({ items: ((_a = this.items) !== null && _a !== void 0 ? _a : []).map((item) => ({
                 text: item.text,
                 value: item.value,
                 formattedValue: item.formattedValue,
                 color: item.color,
                 clickable: item.clickable,
-            })),
-            type: this.chartType,
-            orientation: this.orientation,
-            maxValue: this.maxValue,
-            axisIncrement: this.axisIncrement,
-            displayAxisLabels: this.displayAxisLabels,
-            itemsLabel: this.itemsLabel,
-            valuesLabel: this.valuesLabel,
-            displayItemText: this.displayItemText,
-            displayItemValue: this.displayItemValue,
-            displayItemPercentage: this.displayItemPercentage,
-        };
+            })) }, this.valueStyle), { orientation: this.orientation, maxValue: this.maxValue, axisIncrement: this.axisIncrement, displayAxisLabels: this.displayAxisLabels, itemsLabel: this.itemsLabel, valuesLabel: this.valuesLabel, displayItemText: this.displayItemText, displayItemValue: this.displayItemValue, displayItemPercentage: this.displayItemPercentage });
     }
     withItemColors(settings, theme) {
         return Object.assign(Object.assign({}, settings), { items: settings.items.map((item) => (Object.assign(Object.assign({}, item), { color: this.getItemColor(item, theme) }))) });
@@ -51515,18 +51974,7 @@ const Chart = class {
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "axisIncrement": [{
-                "warnAboutAxisIncrement": 0
-            }],
-        "items": [{
-                "warnAboutAxisIncrement": 0
-            }],
-        "maxValue": [{
-                "warnAboutAxisIncrement": 0
-            }],
         "type": [{
-                "warnAboutAxisIncrement": 0
-            }, {
                 "warnAboutOldTypeName": 0
             }]
     }; }