v2.4.11

Big data optimization

Very large datasets (> 5k or > 10k datapoints) will cause the browsers rendering engines to slow down, caused by too many SVG DOM elements to render.

The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyond a certain threshold to downsample the rendered dataset while preserving its shape. These components are the most susceptible to be used with very large datasets:

Component	Default Threshold	Remark
VueUiXy	500
VueUiXyCanvas	10000	Since this chart uses canvas, threhsold can be set higher
VueUiQuadrant	500
VueUiScatter	500
VueUiSparkline	500
VueUiSparkTrend	500

The downsample threshold for each component can be set in the config prop passed to components:

const config = ref({
  downsample: {
    threshold: 500,
  },
  ...// rest of your config
})

This optimization answers #123

Check out this paper about LTTB, page 21 if you are curious

v2.4.10

VueUiXy

Minor fix: position datapoint labels correctly when value is 0.

v2.4.9

VueUiSparkStackbar

Add optional tooltip:

const config = ref<VueUiSparkStackBarConfig>({
  style: {
    ..., // rest of your config
    tooltip: {
      show: boolean; // default: true
      backgroundColor: string; // default: "#FFFFFF"
      color: string; // default: "#2D353C"
      fontSize: number; // default: 14
      customFormat: null | Function; // default: null *
      borderRadius: number; // default: 4
      borderColor: string; // default: "#E1E5E8"
      borderWidth: number; // default: 1
      position: "left" | "center" | "right"; // default: "center"
      offsetY: number; // default: 24
    }
  }
})

*check out v2.0.6 to see how to use custom format

---

Built-in annotator improvement

(see v2.4.2 for details on this feature)
Now the path is smoothed and optimized while drawing, to auto correct the noise that occurs when using a mouse to draw paths.

v2.4.7

Built-in annotator

The built-in annotator available on all charts through the chart menu now allows to draw paths with individual color and stroke width.
Also, a discrete optimization is applied on paths to smooth out noise that always occurs when drawing by hand (especially with a mouse).

v2.4.5

Source slot

All chart components now expose a #source slot, to display a source caption under your chart.

Usage:

<VueUiDonut :dataset="dataset" :config="config">
  <template #source>
    <div style="font-size: 10px">
      Source: Lorem ipsum...
    </div>
  </template>
</VueUiDonut>

An example is featured on the documentation page

v2.4.2

New user option: annotator ✍️

Most charts now have the annotator user option, available in the chart top menu, which allows end users to draw live annotations on charts. These annotations can be saved using pdf of img download. A nice feature when people talk around a chart.

When activated, the annotator shows a set of 5 actions:

• Close the annotator
• Change the pen color
• Undo
• Redo
• Delete all annotations

By default, this feature is enabled.
To disable this feature, set the following config attribute to false.

userOptions.buttons.annotator: boolean; // default: true

To change the tooltip label of the action button:

userOptions.buttonTitles.annotator: string: // default: "Toggle annotator"

Enregistrement.de.l.ecran.2024-11-23.a.18.44.39.mov

v2.4.1

New component : VueUiBullet

A Bullet Graph is a compact visualization tool for performance data, which includes additional elements such as a target and ranges to provide richer context. This component offers a space-efficient alternative to traditional gauge charts.

Try it out on the documentation page.
A chart maker is also available:)

Enregistrement.de.l.ecran.2024-11-21.a.16.20.43.mov

v2.4.0

VueUiDonut

Apply shadow option in polar mode

VueUiRating & VueUiSmiley

• Improved reactivity
• New config options:

1. Label formatter callbacks to customize labels:

config.style.rating.formatter: Function | null; // default: null
config.style.tooltip.formatter: Function | null; // default: null

Example implementation:

const config = ref({
  style: {
    rating: {
      formatter: ({ value }) => {
        return `Rating: ${value}`;
      }
    }
  }
});

2. Rounding value config option for tooltips:

config.style.tooltip.roundingValue: number: // default: 0

v2.3.99

VueUiQuickChart

Fix bug causing dataset series names to be ignored. (fixes #122)

VueUiCarouselTable

Fix pause on hover optional feature not working.

VueUiIcon

• Improve shapes for star and starFilled icons
• Add starFace icon

v2.3.98

• Improve smooth line algorithm to fix dips in some edge cases
• Update chartAgePyramid icon
• VueUiXy: expose seriesIndex and datapointIndex in #plot-comment slot
• VueUiScatter: fix regression affecting smooth line on vertical marginal bar