Creating a personalized pivot-table using the WebDataRock Javascript library with a unique configuration based on a

I'm having trouble getting this demo to work with the "hierarchy" parameter. Even when I specify the parameter value, it seems to apply the condition to the entire hierarchy chain.

"conditions": [{
            "formula": "#value > 1",                      
            "hierarchy": "Country",
            "measure": "Discount",
            "format": { 
                "backgroundColor": "#C5E1A5",
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
    }]

Try out the starter demo for more information:

Additionally, you can refer to this CodePen example which is linked from the starter demo: https://codepen.io/webdatarocks/pen/oMvYGd

If you replace the CodePen JS code with the provided code below, you can achieve a hierarchic render directly.

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    height: 395,
    report: {
        "slice": {
            "rows": [
                {
                    "uniqueName": "Country"
                },
                {
                    "uniqueName": "Category"
                }
            ],
            "columns":[
            { "uniqueName": "Color" }
            ],
        "measures": [
                {
                    "uniqueName": "Discount",
                    "aggregation": "sum"
                }
            ] ,
        },
        "conditions": [{
            "formula": "#value > 1",                       
            "hierarchy": "Country",
            "measure": "Discount",
            "format": { 
                "backgroundColor": "#C5E1A5",
                "color": &quor;#000000",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        }],
        "dataSource": {
        "filename": "https://cdn.webdatarocks.com/data/data.csv"
        }
    }
});

If you'd like further assistance, check out this related Github issue: https://github.com/WebDataRocks/web-pivot-table/issues/2

javascriptnpmpivot-tablewebdatarocks

Answer №1

Indeed, it appears that the "hierarchy" parameter does not have any impact.

An effective workaround involves utilizing the customizeCell hook to implement the formatting: .

For instance:

JS:

var pivot = new WebDataRocks({
  container: "#wdr-component",
  toolbar: true,
  height: 395,
  customizeCell: customizeCellFunction,
  report: {
    slice: {
      rows: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "Category"
        }
      ],
      columns: [{ uniqueName: "Color" }],
      measures: [
        {
          uniqueName: "Discount",
          aggregation: "sum"
        }
      ]
    },
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    }
  }
});

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData && cellData.type === "value" && cellData.measure && cellData.measure.uniqueName === "Discount" && cellData.value > 1 ) {
    if (
      cellData.rows &&
      cellData.rows.length > 0 &&
      cellData.rows[cellData.rows.length - 1].hierarchyUniqueName === "Country"
    ) {
      cellBuilder.addClass("green");
    }
  }
}

CSS:

.green {
  background-color: #c5e1a5 !important;
  color: #000000 !important;
  font-family: Arial !important;
  font-size: 12px !important;
}

Explore this CodePen demonstration for a visual representation: https://codepen.io/VD_A/pen/vYXgqbY.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Circle with Pixi.js v4 and Typerscript in IONIC 2

I have been attempting to create a custom class in TypeScript that utilizes PIXI.js to draw circles. Below is the code for my home.ts class: import { Component, ViewChild, ElementRef } from '@angular/core'; import { NavController } from 'i ...

javascriptangulartypescriptionic2

Transform the dataUrl into a blob and send it via ajax request

I am currently utilizing the imgly image cropper plugin with some modifications for my application. It has the ability to convert an image into a dataUrl and produce the image as a base64 image which can then be saved as a jpeg. My objective is to adjust ...

javascriptjqueryajaxxmlhttprequestdata-uri

Enable Google Chart to visualize multiple sets of data beyond just 2

This Google chart displays 2 data sets (Tea, Coffee). I've attempted to modify it to show 5 data sets but encountered difficulties. I experimented with changing the button.onclick function and the button value. Below you will find the original code (2 ...

javascripthtmlasp.netasp.net-mvcgoogle-visualization

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

Is it possible to combine TypeScript modules into a single JavaScript file?

Hey there, I'm feeling completely lost with this. I've just started diving into Typescript with Grunt JS and I could really use some assistance. I already have a Grunt file set up that runs my TS files through an uglify process for preparing the ...

javascripttypescriptgruntjs

Dividing blocks of text into individual sentences

Seeking a solution to splitting a paragraph into individual sentences, I initially attempted the following code: var sentences = paragraph.split('.'); While this method was effective in most cases, it encountered issues with sentences like: ...

javascripttext-segmentation

What is the process for refreshing information in VueJS?

<script> export default { data() { return { data: {}, dataTemp: {} } }, methods: { updateData() { let queries = { ...this.$route.query } this.data = { ...this.data, pID: queries.pid, s ...

javascriptvue.jsecmascript-6

Is there a restriction on the number of strings allowed in minimist?

Here is the output received from the code provided below. Question input and i are both true as intended, but why aren't project and p? They are defined in exactly the same way as input and i. $ bin/test --input -p { _: [], update: fa ...

javascriptnode.jsecmascript-6

What is the most effective way to use a withLatestFrom within an effect when integrating a selector with props (MemoizedSelectorWithProps) sourced from the action?

I am struggling to utilize a selector with props (of type MemoizedSelectorWithProps) in an effect inside WithLatestFrom. The issue arises because the parameter for the selector (the props) is derived from the action payload, making it difficult for withLat ...

javascriptangulartypescriptrxjsngrx

Displaying Spinner and Component Simultaneously in React when State Changes with useEffect

Incorporating conditional rendering to display the spinner during the initial API call is crucial. Additionally, when the date changes in the dependency array of the useEffect, it triggers another API call. Question: If the data retrieval process is inco ...

javascriptreactjsreact-reduxreact-router

Encountering a Next.js error when attempting to execute code on a live server

Encountering a frustrating error: Failed to compile ./utils/styles.js Error: failed to process internal error: entered unreachable code: assign property in object literal is invalid This annoying error popped up during the build process and can only be res ...

npmterminalnext.jslocalhost

What is the best way to populate dropdown menus using JavaScript?

I'm facing an issue with my ajax request where I am unable to populate the options of a select tag. This problem is occurring in multiple blocks where the select tag serves the purpose of choosing a type of product. Here is how my select tag looks li ...

javascript

What is the process of converting PUG to JSX?

I am currently attempting to integrate Pug code within a JS react application. While researching, I came across this plugin here, which can assist in converting the code. However, it seems to have an issue with handling the "." statements present in the c ...

javascriptreactjspug

Vue JS Issue: Button click does not trigger tooltip update

I am currently utilizing Vue 3 alongside Bootstrap 5.2. In my project, I have successfully implemented a tooltip by the following method: App.vue <script> import { Tooltip } from "bootstrap"; export default { mounted() { Array.from( ...

javascriptvue.jstooltipbootstrap-5

Having trouble sending JSON data to the server using a POST request

I am encountering an issue while attempting to send JSON data to the server using the fetch API and PHP as the server-side language. The PHP code on the server side is quite simple: <?php header("Access-Control-Allow-Origin: *"); header("Access ...

javascriptphpjsonajaxfetch

What is the best way to showcase two SVG clocks on a single webpage?

The issue arises when combining the desktop and mobile versions of the clock script. The first clock works fine on its own, but upon duplicating another set of scripts for the second clock, it encounters display problems. I have appropriately labeled the c ...

javascripthtmlcsssvg

What is the most effective method for running npm install in nested directories?

What is the most effective method for installing npm packages within nested subdirectories? my-app /my-sub-module package.json package.json How can we ensure that the packages in /my-sub-module are automatically installed when running npm install in ...

node.jsnpm

Unexpected behavior: getElementById returning URL instead of element

I created a function that accepts a thumbnail path as an argument, waits for the bootstrap modal to open, and then assigns the correct path to the thumbnail href attribute within the modal. However, when I use console.log with the element(el), it displays ...

javascriptjquerytwitter-bootstrap

Using one payload.js file for all Nuxt static generated routes with identical data

I am facing a challenge with my NuxtJS site where I have only one page /pages/matrix/index.vue but numerous dynamic routes pointing to this page, all utilizing the same data set. During static build generation for deployment on Netlify, the size of the dis ...

javascriptvue.jsnuxt.jsvue-router

Issue encountered while attempting to update a package using NPM

Encountering an error while attempting to update a specific package using NPM. The command used: sudo npm update -g express Error message: npm WARN package.json [email protected] No repository field. npm WARN package.json [email protected] No ...

node.jsnpmsails.js