v2.1.95

Improved double range slider used in the following components:

• VueUiQuickChart
• VueUiXy
• VueUiDonutEvolution
• VueUiCandlestick

The double range slider handles can't overlap anymore.

An additional config option was added to control the color of the selected portion of the slider track:

VueUiQuickChart: config.zoomHighlightColor: string; // default: "#4A4A4A"
VueUiXy: config.chart.zoom.highlightColor: string; // default: "#4A4A4A"
VueUiDonutEvolution: config.style.chart.zoom.highlightColor: string; // default: "#4A4A4A"
VueUiCandlestick: config.style.zoom.highlightColor: string; // default: "#4A4A4A"

v2.1.92

VueUiXy

• Removed the experimental useCanvas config attribute
• Added config options for bar types, to style bar borders:

config.bar.border: {
  useSerieColor: boolean; // default: false
  strokeWidth: number; // default: 0; to not affect existing user configs
  stroke: string; // default: "#FFFFFF", same as default backgroundColor
}

v2.1.90

VueUiXy :

• Added new config option to customize period spacing for bar types when multiple series are used. See the issue which triggered this change.

Spacing can be customized using config.bar.periodGap, accepting a number between 0 and 1, and set by default to 0.1.

This option has no effect when individual scale + stack modes are enabled, as bar series each take a full period slot in this case.

v2.1.89

VueUiScatter

Added optional selectors showing on datapoint hover, displaying x, y and name. This can be an alternative to using the tooltip, or can be used in combination with it.

Added config attributes in config.style.layout.plots.selectors:

selectors: {
    show: boolean; // default: true
    stroke: string; // default: "#2D353C"
    strokeWidth: number; // default:  0.7
    strokeDasharray: number; // default 0
    labels: {
      fontSize: number; // default: 12
      color: string; // default: "#2D353C"
      rounding: number; // default: 2
      bold: boolean; // default: false
      showName: boolean; // default: true
      prefix: string; // default:  ""
      suffix: string; // default ""
    },
    markers: {
      radius: number; // default: 1.5
      stroke: string; // default: "#FFFFFF"
      strokeWidth: number; // default: 0.5
      fill: string; // default: "#2D353C"
    }
  }

v2.1.88

Safari fixes

VueUiTreemap:

• FIxed cell color disappearing when zooming on a cell in Safari

VueUiGalaxy:

• Fixed gradient not showing on Safari

v2.1.87

VueUiSparkline : added new #before scoped slot to customize chart presentation.

This slot exposes the following data:

• selected : the current selected datapoint when hovering the chart
• latest : the value of the last datapoint
• sum
• average
• median
• trend

Usage (with a very basic presentation):

<VueUiSparkline
     :config="config"
     :dataset="dataset"
>
      <template #before="{ selected, latest, sum, average, median, trend }">
          <ul>
            <li>Latest: {{ latest }}>
            <li>Sum: {{ sum }}>
            <li>Average: {{ average }}>
            <li>Median: {{ median }}>
            <li>Trend: {{ trend }}>
            <li>Selected: {{ selected }}>
          </ul>
      </template>
</VueUiSparkline>

This is also usable with the VueDataUi universal component:

<VueDataUi
     component="VueUiSparkline"
     :config="config"
     :dataset="dataset"
>
      <template #before="{ selected, latest, sum, average, median, trend }">
          <ul>
            <li>Latest: {{ latest }}>
            <li>Sum: {{ sum }}>
            <li>Average: {{ average }}>
            <li>Median: {{ median }}>
            <li>Trend: {{ trend }}>
            <li>Selected: {{ selected }}>
          </ul>
      </template>
</VueDataUi>

v2.1.86

VueUiDonutEvolution: added zoom feature, enabled by default.

config attributes added in config.style.chart.zoom:

{
  ...
  show: boolean; // default: true, will show the zoom feature for line and bar types
  color: string; // default: #CCCCCC, the color of the slider
  fontSize: number; // default: 14, the font size of the slider's labels
  useResetSlot: boolean; // default: false, use a custom reset button or not
}

To customize the reset button, visible when zoom is used, set useResetSlot:true, and include the #reset-action slot inside the component:

<VueUiNestedDonuts :dataset="dataset" :config="config">
  <template #reset-action="{ reset }">
    <button @click="reset()">RESET</button>
  </template>
</VueUiNestedDonuts>

v2.1.83

VueUiTableSparkline:

• Fixed wrong ordering of sparkline charts when ordering columns

v2.1.82

VueUiXy

• Improved line path coatings, to avoid showing individual segment borders when plots radius are smaller than line strokeWidth, in non smooth mode.

v2.1.81

VueUiQuickChart: added zoom feature, enabled by default on line and bar types

config attributes added:

{
  ...
  zoomXy: boolean; // default: true, will show the zoom feature for line and bar types
  zoomColor: string; // default: #CCCCCC, the color of the slider
  zoomFontSize: number; // default: 14, the font size of the slider's labels
  zoomUseResetSlot: boolean; // default: false, use a custom reset button or not
}

To customize the reset button, visible when zoom is used, set zoomUseResetSlot:true, and include the #reset-action slot inside the component:

<VueUiQuickChart :dataset="dataset" :config="config">
  <template #reset-action="{ reset }">
    <button @click="reset()">RESET</button>
  </template>
</VueUiQuickChart>