Vega Lite Custom code to change month visual to Quarters and Years based on Selection

[DonKasun909]

Hi Team,

I am using this visual from @datavouge and I need to do some customization for the same. Currently this is a KPI which contains chart by month and I want to change it to Quarters and Years based on slicer selection. Here is the code

{ "description": "Column chart with text updated when hovering over a point. Author: ", "data": {"name": "dataset"}, "title": "TURNOVER", "transform": [ { "joinaggregate": [ { "op": "max", "field": "period", "as": "max_period" } ] } ], "encoding": { "y": {"type": "quantitative"}, "x": { "field": "period", "type": "ordinal", "axis": { "format": "%b", "formatType": "time", "labelExpr": "datum.label[0]" } } }, "layer": [ { "description": "sparkline definition", "mark": { "type": "bar", "width": {"band": 0.7} }, "encoding": { "y": {"field": "actual"}, "color": { "condition": { "param": "hoverPoint", "empty": false, "value": "#22A7F0" }, "value": "#c8c8c8" } } }, { "description": "points activated by hovering over", "params": [ { "name": "hoverPoint", "select": { "type": "point", "on": "pointermove", "encodings": ["x"], "clear": "pointerout", "nearest": true } } ], "encoding": { "y": {"field": "actual"} }, "mark": { "type": "point", "opacity": 0 } }, { "description": "details for hovered point (or the last one)", "transform": [ { "calculate": "isDefined(hoverPoint['period']) ? hoverPoint['period'][0] == datum['period'] : datum['period']==datum.max_period", "as": "displayDetails" }, { "filter": "datum.displayDetails" } ], "layer": [ { "mark": { "type": "text", "size": 20, "fontWeight": "normal", "color": "#1D1F48" }, "encoding": { "text": { "field": "actual", "aggregate": "sum", "type": "quantitative", "format": "#0,,,.##B", "formatType": "pbiFormat" }, "x": {"value": 0}, "y": {"value": -50} } }, { "mark": { "type": "text", "size": 9, "fontWeight": "normal", "color":{ "expr" : "datum['KPI_Turnover__formatted'] >= 0 ? '#63D471':'#FD7369'" }

      },
      "encoding": {
        "text": {
          "field": "KPI_T"

        },
        "x": {"value": 60},
        "y": {"value": -25}
      }
    },
    {
      "mark": {
        "type": "text",
        "size": 13
      },
      "encoding": {
        "text": {
          "field": "period",
          "format": "%b-%Y",
          "formatType": "time"
        },
        "x": {"value": 0},
        "y": {"value": -26}
      }
    }
  ]
}

] }

[avatorl]

Currently this is a KPI which contains chart by month and I want to change it to Quarters and Years based on slicer selection. Here is the code

I think in this case it doesn't matter is it a core visual or Deneb. See https://learn.microsoft.com/en-us/power-bi/create-reports/power-bi-field-parameters regarding switching between different fields (Month, Quarter, Year).