Search code examples
vega-litevegadeneb

Facet graph : how to filter Y - array field


As you can see here in the editor, the version axis shows the version of all product, for each products.

On the exemple there is only 2 products, but I am working with an undefined numbers of products, and I donct want to hardcode a Vconcat for each one.

I would like to make Y axis independant between the different facet i.e. display Product1 according to version that he is using, and Product2 the same. I've been trying for 5/10h+ but can't figure it out alone. Any help is welcome


Solution

  • Do you mean like this?

    enter image description here

    If so, set your scale to independent.

    {
      "title": {
        "text": "Concordance Produit / Projet, réalisé à partir du planning "
      },
      "data": {
        "values": [
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product 1 V1 ",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2023-04-28",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Produit",
            "Signification": "MAD",
            "Référentiel": "Product 1 V1 ",
            "Signification_bis": "START",
            "Date_value": "Confirmed",
            "Date_Début": "2023-03-31",
            "Date_Fin": "2022-07-07"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product1 V2",
            "Signification_bis": "MES",
            "Date_value": "ToBeConfirmed ",
            "Date_Début": "2023-04-28",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Produit",
            "Signification": "MAD",
            "Référentiel": "Product1 V2",
            "Signification_bis": "START",
            "Date_value": "Confirmed",
            "Date_Début": "2023-05-26",
            "Date_Fin": "2022-07-07"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product1 V3",
            "Signification_bis": "MES",
            "Date_value": "ToBeConfirmed ",
            "Date_Début": "2023-04-28",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Produit",
            "Signification": "MAD",
            "Référentiel": "Product1 V3",
            "Signification_bis": "START",
            "Date_value": "Confirmed",
            "Date_Début": "2023-06-30",
            "Date_Fin": "2022-07-07"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product1 V4",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2024-06-28",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Produit",
            "Signification": "MAD",
            "Référentiel": "Product1 V4",
            "Signification_bis": "START",
            "Date_value": "Confirmed",
            "Date_Début": "2023-11-02",
            "Date_Fin": "2022-07-07"
          },
          {
            "Projet": "Project",
            "Produit": "Product2",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product2 V1",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2022-07-04",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product2",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product2 V2",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2023-01-31",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product2",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product2 V3",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2023-07-03",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product2",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product2 V4",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2023-08-18",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Projet",
            "Signification": "BESOIN",
            "Référentiel": "Product1 V5",
            "Signification_bis": "MES",
            "Date_value": "Confirmed",
            "Date_Début": "2023-06-30",
            "Date_Fin": "2023-11-15"
          },
          {
            "Projet": "Project",
            "Produit": "Product1",
            "ID_task": "Produit",
            "Signification": "MAD",
            "Référentiel": "Product1 V5",
            "Signification_bis": "START",
            "Date_value": "Confirmed",
            "Date_Début": "2023-04-03",
            "Date_Fin": "2022-07-07"
          }
        ]
      },
      "facet": {"row": {"field": "Produit"}},
      "autosize": "pad",
      "config": {"tick": {"thickness": 20, "bandSize": 500}},
      "spec": {
        "width": 800,
        "height": 90,
        "layer": [
          {
            "layer": [
              {
                "params": [
                  {"name": "grid", "select": "interval", "bind": "scales"}
                ],
                "transform": [
                  {"filter": {"field": "ID_task", "oneOf": ["Produit"]}}
                ],
                "mark": {
                  "type": "bar",
                  "opacity": 1,
                  "cornerRadius": 10,
                  "fillOpacity": 0.5,
                  "height": 15
                }
              }
            ],
            "encoding": {
              "x": {
                "field": "Date_Début",
                "type": "temporal",
                "axis": {
                  "title": null,
                  "grid": true,
                  "labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
                  "gridDash": {
                    "condition": {
                      "test": {"field": "value", "timeUnit": "month", "equal": 1},
                      "value": []
                    },
                    "value": [2, 2]
                  },
                  "tickDash": {
                    "condition": {
                      "test": {"field": "value", "timeUnit": "month", "equal": 1},
                      "value": []
                    },
                    "value": [2, 2]
                  }
                }
              },
              "x2": {"field": "Date_Fin"},
              "y": {
                "field": "Référentiel",
                "type": "nominal",
                "axis": {"title": null, "grid": true, "tickBand": "extent"}
              }
            }
          },
          {
            "transform": [{"calculate": "now()", "as": "now_field"}],
            "mark": {"type": "rule", "color": "#FE8389", "size": 1, "opacity": 0.4},
            "encoding": {"x": {"field": "now_field", "type": "temporal"}}
          },
          {
            "transform": [{"filter": {"field": "ID_task", "oneOf": ["Projet"]}}],
            "mark": {
              "type": "point",
              "color": "#EC6602",
              "size": 150,
              "orient": "horizontal",
              "opacity": 0.8,
              "shape": "triangle-up"
            },
            "encoding": {
              "color": {
                "field": "Date_value",
                "scale": {"range": ["#EC6602", "#FFB400"]}
              },
              "x": {"field": "Date_Début", "type": "temporal"},
              "y": {"field": "Référentiel", "type": "nominal"}
            }
          }
        ]
      },
      "resolve": {"scale": {"y": "independent"}}
    }