We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Vue heat map

Implement a heat map in your Vue application to visually represent a comparative view of your dataset.


    <template>
      <Pivot
        componentFolder="https://cdn.flexmonster.com/"
        height="600"
        v-bind:report="report"
        v-bind:customizeCell="customizeCellFunction"
      />
    </template>
    
    <script>
    import Pivot from "vue-flexmonster/vue3";
    import "flexmonster/flexmonster.css";
    
    import * as tinycolor from "tinycolor2";
    
    const colorScheme = [
      "#DF3800",
      "#FF6D1E",
      "#FF9900",
      "#FFB600",
      "#A5CE31",
      "#6CBD05",
      "#00A45A",
    ];
    
    const minValue = 0;
    const maxValue = 15000;
    
    export default {
      name: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          report: {
            dataSource: {
              type: "csv",
              filename: "data/sales.csv",
            },
            slice: {
              rows: [
                {
                  uniqueName: "Month",
                },
                {
                  uniqueName: "[Measures]",
                },
              ],
              columns: [
                {
                  uniqueName: "Category",
                  levelName: "Product Name",
                  filter: {
                    members: [
                      "category.[condiments].[bbq sauce]",
                      "category.[breakfast cereals].[corn flakes]",
                      "category.[confectionery]",
                      "category.[bakery].[chocolate biscuits]",
                      "category.[fruit preserves].[apple jam]",
                      "category.[bakery].[apple cake]",
                      "category.[soups].[tomato soup]",
                    ],
                  },
                },
              ],
              measures: [
                {
                  uniqueName: "Revenue",
                  aggregation: "sum",
                  format: "currency",
                },
              ],
            },
            formats: [
              {
                name: "",
                thousandsSeparator: ",",
                decimalSeparator: ".",
                decimalPlaces: 2,
              },
              {
                name: "currency",
                currencySymbol: "$",
              },
            ],
          },
        };
      },
      methods: {
        customizeCellFunction(cell, data) {
          if (data?.type === "value" && !data?.isGrandTotal) {
            let backgroundColor = this.getColorFromRange(data.value);
            let textShadowColor = tinycolor(backgroundColor).darken(15).toString();
            let borderColor = tinycolor(backgroundColor).darken(3).toString();
    
            cell.style = {
              ...cell.style,
              "background-color": backgroundColor,
              color: "white",
              "font-weight": "bold",
              "text-shadow": `0px 2px 3px ${textShadowColor}`,
              "border-bottom": `1px solid ${borderColor}`,
              "border-right": `1px solid ${borderColor}`,
            };
          }
        },
        getColorFromRange(value) {
          if (isNaN(value)) {
            value = minValue;
          }
          value = Math.max(minValue, Math.min(value, maxValue));
          let perc = (minValue + value) / maxValue;
          let colorIdx = Math.round((colorScheme.length - 1) * perc);
          return colorScheme[colorIdx];
        },
      },
    };
    </script>
    

    Flexmonster API allows you to build a heat map analysis quickly. Encode values in colors according to your dataset logic and get the color cells that help you to get the overall view and insightful information.

    For more details, follow the clear-cut blog about how to create a heat map.

    Flexmonster provides many possibilities for Customizing the grid, so you can try more options to make your reporting tool fully-fitted your Vue application.