1 Reply Latest reply: Jan 16, 2016 10:02 AM by prabhu appu RSS

    Multi Dimension Extension not working

    dion verbeke

      Hi,

       

      I'm trying to create an extension that will work with more than one dimension and one measure.

      Somehow I always get a qNum error in the console. Any idea why I can't "see"

        return d[2].qNum?

       

      =========

       

      define( ["jquery","./d3"], function ( $ ) {

        'use strict';

       

       

        return {

        initialProperties: {

        qHyperCubeDef: {

        qDimensions: [],

        qMeasures: [],

        qInitialDataFetch: [{

        qWidth: 10,

        qHeight: 50

        }]

        }

        },

        definition: {

        type: "items",

        component: "accordion",

        items: {

        dimensions: {

        uses: "dimensions",

        min: 1,

        max: 2

        },

        measures: {

        uses: "measures",

        min: 1,

        max: 1

        },

        sorting: {

        uses: "sorting"

        },

        settings : {

        uses : "settings",

        items : {

        Line:{

        ref: "strokeStyle",

        component: "dropdown",

        type: "boolean",

        label: "Stroke type",

        defaultValue:  true,

        options: [{

        value: true,

        label: "Smooth"

        }, {

        value: false,

        label: "Straight"

        }],

        show: true

        },

        Legend:{

        ref: "showLegend",

        component: "switch",

        type: "boolean",

        translation: "Legend",

        defaultValue: true,

        trueOption: {

         value: true,

         translation: "properties.on"

        },

        falseOption: {

         value: false,

         translation: "properties.off"

        },

        show: true

        },

        Color:{

        type: "items",

        label: "Colors",

        items : {

        colorPalette: {

        ref: "colorPalette",

        component: "dropdown",

        type: "string",

        label: "Color palette",

        defaultValue:  "QLIK",

        options: [{

        value: "QLIK",

        label: "Qlik"

        }, {

        value: "CUSTOM",

        label: "Custom color"

        }, {

        value: "FORMULA",

        label: "Formula color"

        }],

        show: true

        },

        customPalette: {

        ref: "customPalette",

        type: "string",

        label: "Custom color palette",

        defaultValue: "#EDC951, #CC333F, #00A0B0",

        expression: "",

        show: function(layout) { return layout.colorPalette == "CUSTOM" }

        },

        formulaPalette: {

        ref: "formulaPalette",

        type: "string",

        label: "Formula color palette",

        defaultValue: "= Concat(Distinct Color, ', ')",

        expression: "always",

        show: function(layout) { return layout.colorPalette == "FORMULA" }

        },

        colorLinear:{

        ref: "colorLinear",

        component: "switch",

        type: "boolean",

        translation: "Linear scale",

        defaultValue: false,

        trueOption: {

         value: true,

         translation: "properties.on"

        },

        falseOption: {

         value: false,

         translation: "properties.off"

        },

        show: function(layout) { return layout.colorPalette == "CUSTOM" }

        },

        colorPersistence:{

        ref: "colorPersistence",

        component: "switch",

        type: "boolean",

        translation: "Persistence",

        defaultValue: false,

        trueOption: {

         value: true,

         translation: "properties.on"

        },

        falseOption: {

         value: false,

         translation: "properties.off"

        },

        show: true

        }

        }

        }

        }

        }

        }

        },

        snapshot: {

        canTakeSnapshot: true

        },

        paint: function ( $element, layout ) {

       

       

        

        var options = {

        size: {width: $element.width(), height: $element.height()}, //Width and Height of the circle

        margin: {top: 50, right: 50, bottom: 50, left: 50} //The margins around the circle

       

        };

       

        //////////////////////////////////////////////////////////////

        ////////////////////////// Data //////////////////////////////

        //////////////////////////////////////////////////////////////

       

        var json = convertHYPERCUBEtoJSON(layout);

       

        console.log(json);

       

        

        }

       

       

       

       

        }

       

        function convertHYPERCUBEtoJSON(layout) {

       

       

        // get qMatrix data array

        var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix;

       

       

        // create a new array that contains the measure labels

        var dimensions = layout.qHyperCube.qDimensionInfo;

        var LegendTitle = dimensions[0].qFallbackTitle;

       

        // create a new array that contains the dimensions and metric values

        // depending on whether if 1 or 2 dimensions are being used

        if(dimensions.length==2){ 

        var dim1Labels = qMatrix.map(function(d) {

        return d[0].qText;

        });

        var dim1Id = qMatrix.map(function(d) {

        return d[0].qElemNumber;

        });

        var dim2Labels = qMatrix.map(function(d) {

        return d[1].qText;

        });

        var dim2Id = qMatrix.map(function(d) {

        return d[1].qElemNumber;

        });

        var metric1Values = qMatrix.map(function(d) {

        return d[2].qNum;

        }) ; 

        }

        else{

        var dim1Labels = qMatrix.map(function(d) {

        return d[0].qText;

        }); 

        var dim1Id = qMatrix.map(function(d) {

        return d[0].qElemNumber;

        });

        var dim2Labels = dim1Labels;

        var dim2Id = dim1Id;

        var metric1Values = qMatrix.map(function(d) {

        return d[1].qNum;

        }); 

        }

       

        // create a JSON array that contains dimensions and metric values

        var data = [];

        var actClassName = "";

        var myJson = {};

        myJson.dim_id = "";

        myJson.dim = "";

        myJson.definition = [];

        var cont = 0;

        var contdata = 0;

        var LegendValues = [];

        if(dimensions.length==2){

        for(var k=0;k<dim1Labels.length;k++){

        if(actClassName!=dim1Labels[k] ){

        if(cont!=0){

        data[contdata] = myJson;

        contdata++;

        }

        // it is a different grouping value of Dim1

        LegendValues.push(dim1Labels[k]);

        var myJson = {};

        myJson.dim_id = "";

        myJson.dim = "";

        myJson.definition = [];

        cont = 0;

        myJson.dim_id = dim1Id[k];

        myJson.dim = dim1Labels[k];

        // Make sure radar_area is added for usage in the radar chart layers later

        myJson.definition[cont]  = {"axis_id" : dim2Id[k], "axis" : dim2Labels[k], "radar_area_id" : dim1Id[k], "radar_area" : dim1Labels[k], "value" : metric1Values[k]};

        cont++;

        // Make sure radar_area is added for usage in the radar chart layers later

        }else{

        myJson.definition[cont]  = {"axis_id" : dim2Id[k], "axis" : dim2Labels[k], "radar_area_id" : dim1Id[k], "radar_area" : dim1Labels[k], "value" : metric1Values[k]};

        cont++;

        }

        actClassName =  dim1Labels[k];

        }

        data[contdata] = myJson;

        }else{

        for(var k=0;k<dim1Labels.length;k++){

        // it is a different grouping value of Dim1

        LegendValues.push(dim1Labels[k]);

        // Make sure radar_area is added for usage in the radar chart layers later

        myJson.definition[cont] = {"axis_id" : dim2Id[k], "axis" : dim2Labels[k], "radar_area_id" : dim1Id[k], "radar_area" : dim1Labels[k], "value" : metric1Values[k]};

        cont++;

        }

        data[contdata] = myJson;

        }

        return data;

        }

       

       

        });