<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script setup lang="ts">

  import { computed } from "vue";

  import { MDBDatatable } from "mdb-vue-ui-kit";

​

  const dataset11: {columns: {[props:string]: any}[]; rows: (string | number)[][];} = {

    columns:[],

    rows: [

      ["Product 1", 10, 103],

      ["Product 2", 45, 110],

      ["Product 3", 76, 56],

      ["Product 4", 89, 230],

      ["Product 5", 104, 240],

      ["Product 6", 97, 187],

      ["Product 7", 167, 130],

      ["Product 8", 50, 199],

      ["Product 9", 4, 206],

      ["Product 10", 120, 88],

      ["Product 11", 22, 100]

    ]

  };

  const maxValue = Math.max(...dataset11.rows.map(row => row[2] as number));

  const minValue = Math.min(...dataset11.rows.map(row => row[2] as number));

  const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];

  const step = (maxValue - minValue) / (colors.length - 1);

  const format = computed(() =>

    dataset11.rows.map(row => {

      const colorIndex = Math.floor((row[2] as number - minValue) / step);

      return {

        backgroundColor: colors[colorIndex],

        fontWeight: 400

      };

    })

  );

  dataset11.columns = [

    { label: "Product", field: "product" },

    { label: "Quantity", field: "quantity" },

    { label: "Purchases", field: "purchases", format }

  ];

</script>