v2.2.84

VueUiSparkbar improvements

This release adds config options to setup a title and subtitle on the chart, or to use a #title slot for full customization.

Check out the updated docs

Shoutout to @lucaspmarra for his idea and contribution for this improvement :)

v2.2.82

This release adds a new component: VueUiTimer

Enregistrement.de.l.ecran.2024-09-05.a.19.51.37.mov

Check out the docs to try it out!

v2.2.79

VueUiSparkbar improvements

• New config options to display the target value, and a text for the target

config.style.layout.showTargetValue: boolean; // default: false
config.style.layout.targetValueText: string; // default: ""

• New #data-label slot to display custom data labels. This slot exposes a bar object with all the necessary data to build your own labels. If the slot is not used, default data labels will be displayed.

<VueUiSparkbar
  :dataset="dataset"
  :config="config"
>
  <template #data-label="{ bar }">
    <div style="width:100%">
      {{ bar.name }}: {{ bar.valueLabel }} / {{ bar.targetLabel }}
    </div>
  </template>
</VueUiSparkbar>

v2.2.78

This release removes all spaces before colons in data labels and legends.

v2.2.74

VueUiSparkbar

This release adds an optional dataset option target, to allow multiple dataset to have individual targets.
When "target" is used on a datapoint, the bar width ratio will be value / target.

config.style.layout.independant must be set to true.

const dataset = ref([
  {
    name: "Item 1",
    value: 200,
    target: 1000,
    rounding: 1,
    suffix: "",
    prefix: ""
  },
  {...} 
])

v2.2.73

VueUiGauge : fixed config option marker offsetY not applied

v2.2.72

VueUiGauge : Fixed pointer y offset when in rounded mode

v2.2.71

VueUiXy : fixed sizing not working properly when changing dimensions in the config

v2.2.70

This release improves accessibility of the charts user options menu, by adding title attributes to its buttons.

The content of the titles attributes is configurable for each chart, through the config.userOptions.buttonTitles :

const config = ref({
   userOptions: {
     buttonTitles: {
       open: "Open options",
       close: "Close options",
       tooltip: "Toggle tooltip",
       pdf: "Download PDF",
       csv: "Download CSV",
       img: "Download PNG",
       table: "Toggle table",
       labels: "Toggle labels",
       sort: "Toggle sort",
       fullscreeen: "Toggle fullscreen"
     }
   }
})

Since charts have more or less user options, the config buttonTitles options will vary depending on the chart. Check out the detailed docs to learn more.

v2.2.69

VueUiDonut & VueUiParallelCoordinatePlot

Added dataset and config options to display comments for specific datapoints.
Comments can be optionally visible in the tooltip too.

VueUiDonut example:

const dataset = ref([
  {
    name: 'Serie 1',
    values: [100],
    comment: 'A comment for this datapoint'
  },
  {
    name: 'Serie 2',
    values: [50]
  }
])

VueUiParallelCoordinatePlot example:

const dataset = ref([
  {
    name: 'Series 1',
    shape: 'triangle',
    series: [
      {
        name: 'Item 1.1',
        values: [1200, 300, 12, 1.2],
        comments: ['', '', 'A comment for this datapoint', ''] // Comment will be visible under the datapoint with value 12
      },
      {...}
    ]
  },
  {...}
])

You can configure comments in the config object:

const config = ref({
  style: {
    chart: {
        comments: {
          show: true,
          showInTooltip: true,
          width: 200,
          offsetX: 0,
          offsetY: 0
      } 
    }
  }
})

To actually display comments on the chart, you need to use the #plot-comment slot, which gives you more control on the style:

<VueUiDonut
  :dataset="dataset"
  :config="config"
>
  <template #plot-comment="{ plot }">
    <div :style="`width: 100%; text-align:${plot.textAlign}; color:${plot.color}`">
      {{ plot.comment }}
    </div>
  </template>
</VueUiDonut>

<VueUiParallelCoordinatePlot
  :dataset="dataset"
  :config="config"
>
  <template #plot-comment="{ plot }">
    <div :style="`width: 100%; text-align:center; color:${plot.color}`">
      {{ plot.comment }}
    </div>
  </template>
</VueUiParallelCoordinatePlot>

We are considering rolling-out this feature to other charts where it would be useful.