VueUiNestedDonuts

Improve graceful layout management of empty data.

VueUiDonut #218

• Remove opacity on donut arcs

Multi-line labels #217

• Generate multiline datalabels when they include a line break \n

Example: "This is a long\nlabel to show"

The table below shows which components accept this feature and where:

VueUiWaffle

• Show graceful layout when all datapoint values are empty arrays

VueUiDonut & VueUiNestedDonuts #215

• Add width and height config attributes:

const config = ref({
  style: {
    chart: {
      width: 512,
      height: 360
    }
  }
})

Note: these dimensions will be ignored when responsive is set to true.

Docs are up to date:
VueUiDonut
VueUiNestedDonuts

VueUiXy

• Improve series layout in stacked mode

• Add config option to set x axis crosshairs always on the bottom baseline, or on zero:

config.chart.grid.labels.xAxis.crosshairsAlwaysAtZero: boolean // default: false (previous behavior, always on the bottom baseline)

Date time formatter

A config datetime formatter was added to the following components, to manage timestamp x axis values formatting:

• VueUiXy
• VueUiXyCanvas
• VueUiStackbar
• VueUiRidgeline
• VueUiDonutEvolution
• VueUiQuickChart

datetimeFormatter: {
  enable: boolean // default: false
  locale: string // default: 'en'
  useUTC: boolean // default: false
  januaryAsYear: boolean // default: false
  options: {
    year: string // default: 'yyyy'
    month: string // default: "MMM 'yy"
    day: string // default: 'dd MMM'
    hour: string // default: 'HH:mm'
    minute: string // default: 'HH:mm:ss'
    second: string // default: 'HH:mm:ss'
  }
}

DOCS are up to date

Components with dual range zoom

• Merge tooltips when they collide:

VueUiXy

• Add responsiveProportionalSizing config option, (true by default = previous behavior). Set to true, it disables the text elements automatic resizing in responsive mode. #212

• Add useNiceScale config option to force a nice scale (false by default = previous behavior)

• Fix errors on straight line datasets when dataset starts with a null value and cutNullValues is true

• Add config options for xAxis and yAxis crosshair markers

• Add optional yAxis annotations, to draw either a line or an area following one or two y values, with a label. You can create multiple annotations:

Docs and examples are up to date

All charts with user options

• Add optional config callbacks to override default button behavior

const config = ref({
  userOptions: {
    // These callbacks will be called when user options buttons are clicked.
    callbacks: {
      pdf: (chart: HTMLElement) => {
        // use your own pdf solution
      },
      img: (base64: string) => {
        // do whatever you want with the base 64 image data of the chart
      },
      csv: (csvContent: string) => {
        // do whatever you want with the csv data
      },
      // all other buttons have also their callbacks (no params), with the same name as the button
    }
  }
})

• Improve management of resizeObservers
• Import some atom components as async in chart components to improve treeshaking
• Fix - VueUiRidgeline & VueUiDonutEvolution - Display BaseDraggableDialog in direct parent in fullscreen mode

Utility functions

Add getCumulativeAverage and getCumulativeMedian utility functions:

getCumulativeAverage

import { getCumulativeAverage } from "vue-data-ui";

// Simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeAvg = getCumulativeAverage({ values: arr });

// Ignore invalid values entirely
const arrWithInvalid = [0, 1, 2, null, undefined, NaN, Infinity, -Infinity];
const cumulativeAvgNoInvalid = getCumulativeAverage({
    values: arrWithInvalid,
    config: { keepInvalid: false }
});

// Convert invalid values to zero
const cumulativeAvgZeroed = getCumulativeAverage({
    values: arrWithInvalid,
    config: { convertInvalidToZero: true }
});

getCumulativeMedian

import { getCumulativeMedian } from "vue-data-ui";

// Simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeMed = getCumulativeMedian({ values: arr });

// Ignore invalid values entirely
const arrWithInvalid = [0, 1, 2, null, undefined, NaN, Infinity, -Infinity];
const cumulativeMedNoInvalid = getCumulativeMedian({
    values: arrWithInvalid,
    config: { keepInvalid: false }
});

// Convert invalid values to zero
const cumulativeMedZeroed = getCumulativeMedian({
    values: arrWithInvalid,
    config: { convertInvalidToZero: true }
});

VueUiDonutEvolution

Improved datapoint focus behavior:

• Use VueUiDonut in a resizable and draggable dialog

New config attributes to control the dialog and the embedded donut:

const config = ref({
  style: {
    chart: {
      dialog: {
        show: true,
        backgroundColor: '#FFFFFF',
        color: '#D2D353C',
        header: {
          backgroundColor: '#FFFFFF',
          color: '#2D353C',
        },
        donutChart: {
          // VueUiDonut config
        }
      }
    }
  }
})

Deprecated config attributes, related to the old way datapoints were focused on:

const config = ref({
  style: {
    chart: {
      donuts: {
        zoom: {...} // Deprecated
      }
    }
  }
})

Docs are up to date