Skip to content

Releases: graphieros/vue-data-ui

v3.1.12

17 Sep 15:09
Compare
Choose a tag to compare

VueUiXy

Fix scale issues in zoom minimap when multiple series are visible.

v3.1.11

17 Sep 13:00
Compare
Choose a tag to compare

VueUiXy

Fix recursive update error in Firefox when using a large amount of data intensive chart instances with zoom + preview enabled.

v3.1.10

17 Sep 06:15
Compare
Choose a tag to compare

Follow-up to v3.1.8

  • Improve minimap performance for VueUiXy and VueUiQuickChart zoom
  • Apply optional cutNullValues set on VueUiXy on minimap lines

v3.1.8

16 Sep 12:10
Compare
Choose a tag to compare

VueUiXy, VueUiQuickChart : compact minimap with all visible series

Enregistrement.de.l.ecran.2025-09-16.a.14.02.34.mov

VueUiXy

const config = ref({
  chart: {
    zoom: {
      minimap: {
        show: true,
        compact: true, // new (default true, set to false to get previous design)
        merged: false, // new (default false, shows all series. Set to true to get previous design)
        frameColor: '#A1A1A1' // new (set frame color when compact = true)
      }
    }
  }
})

VueUiQuickChart

const config = ref({
  zoomMinimap: {
    show: true,
    compact: true, // new (default true, set to false to get previous design)
    merged: false, // new (default false, shows all series. Set to true to get previous design)
    frameColor: '#A1A1A1' // new (set frame color when compact = true)
  }
})

VueUiTable - Add filename input field in export menu #250

image

An optional default filename can be set in config.style.exportMenu.filename (default: '')

VueUiNestedDonuts

Fix inverted donut names on Firefox

v3.1.7

14 Sep 14:43
Compare
Choose a tag to compare

VueUiXy - Custom gradients

New slots are available to use custom gradients on areas and bars.

#area-gradient & #bar-gradient slots

Use these slots to inject a gradient svg element (linearGradient, radialGradient) into the pre-existing defs element of the chart.
Slots expose the series data, as well as the id that must be used on the gradient to be recognized and applied.

<VueUiXy
  :dataset="dataset"
  :config="config"
>
  <!-- This slot is applied on all line series with useArea set to true -->
  <template #area-gradient="{ series, id }">
    <linearGradient :id="id" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" :stop-color="series.color"/>
      <stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
    </linearGradient>
  </template>

  <!-- This slot is applied on all bar series -->
  <template #bar-gradient="{ series, positiveId, negativeId }">
    <!-- Gradient applied for positive datapoints -->
    <linearGradient :id="positiveId" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" :stop-color="series.color"/>
      <stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
    </linearGradient>

    <!-- Gradient applied for negative datapoints -->
    <linearGradient :id="negativeId" x1="0" x2="0" y1="0" y2="1">
       <stop offset="0%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
       <stop offset="100%" :stop-color="series.color"/>
    </linearGradient>
  </template>
</VueUiXy>
image image

Documentation & examples are up to date

v3.1.6

14 Sep 06:41
Compare
Choose a tag to compare

Built-in chart data tables

  • Hide data tables from the DOM when userOptions.buttons.table is false

v3.1.5

13 Sep 07:50
Compare
Choose a tag to compare

Tooltips

  • Improve performance
  • Add config options to control smooth params:
tooltip: {
    smooth: true,
    smoothForce: 0.18, // New. Lower = slower
    smoothSnapThreshold: 0.25 // New
}

Zoom (double range input)

  • Fix offset from the client position when dragging a zoom selection

v3.1.4

12 Sep 12:44
Compare
Choose a tag to compare

VueUiTable #248

  • Add config option to show / hide export button
const config = ref({
  style: {
    exportMenu: {
      show: true, // new, default: true
    }
  }
})
  • Add @page-change event, fired when pagination buttons are used (all buttons, range input and items-per-page select)
<VueUiTable
    :config="config"
    :dataset="dataset"
    @page-change="onPageChange"
/>
function onPageChange(pageData: VueUiTablePageChangeEvent) {
    const { 
        currentPage,
        totalPages,
        itemsPerPage,
        currentPageData
    } = pageData;

    console.log({ currentPage, totalPages, itemsPerPages, currentPageData });
}

v3.1.3

11 Sep 05:13
Compare
Choose a tag to compare

VueUiDashboard

  • Set responsive font sizes for chart titles and legends

VueUiXy

  • Prevent error when config is provided without the chart attribute

v3.1.2

10 Sep 05:39
Compare
Choose a tag to compare

VueUiDashboard improvements #246

  • Add user options in config, with optional annotator; image and pdf
const config = ref({
  userOptions: {
    show: true,
    showOnChartHover: false,
    keepStateOnChartLeave: true,
    position: 'right',
    buttons: {
      pdf: true,
      img: true,
      annotator: true
    },
    callbacks: {
      pdf: null,
      img: null,
      annotator: null
    },
    buttonTitles: {
      pdf: 'Download PDF',
      img: 'Download PNG',
      annotator: 'Toggle annotator'
    },
    print: {
      scale: 2,
      filename: ''
    }
  }
})

User options callbacks:

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
      },
      // all other buttons have also their callbacks (no params), with the same name as the button
    }
  }
})

PDF improvements

  • The size of the PDF is based on config.style.board.aspectRatio (default: "1/1.4141", which is A4 in portrait mode)
  • The file name can be set in config.userOptions.print.filename

Deprecated config options

  • config.allowPrint is deprecated, but will still keep working. It is replaced with config.userOptions.show. It is recommended to make the change.
  • config.style.resizeHandles.border is removed (was not applied anyway, so no breaking change here either)