mussonindustrial / embr

Modules for Ignition by Inductive Automation 🔥
MIT License
11 stars 1 forks source link

Error when attempting to use filter and generateLabels with legends plugin #49

Closed calebmusson closed 5 months ago

calebmusson commented 5 months ago

When attempting to use the filter and generateLabels options within the legend plugin the following error occurs. Based on the documentation filter should return true or false. Works when returning true but if any datasets return false the error will occur. TypeError: Cannot read properties of undefined (reading 'datasetIndex')

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "custom": {
          "colors": [
            "#e60049",
            "#0bb4ff",
            "#50e991",
            "#e6d800",
            "#9b19f5",
            "#ffa300",
            "#dc0ab4",
            "#b3d4ff",
            "#00bfa0"
          ]
        },
        "meta": {
          "name": "Chartjs_3"
        },
        "position": {
          "basis": "300px"
        },
        "props": {
          "data": {
            "datasets": [
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[0];",
                "data": [
                  [
                    1716373137609,
                    1716373182677
                  ]
                ],
                "label": "Locked",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[1];",
                "data": [
                  [
                    1716373182677,
                    1716373212677
                  ]
                ],
                "label": "Failed",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[2];",
                "data": [
                  [
                    1716373212677,
                    1716373227678
                  ]
                ],
                "label": "Open",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[3];",
                "data": [
                  [
                    1716373227678,
                    1716373287610
                  ]
                ],
                "label": "Closed",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[0];",
                "data": [
                  [
                    1716373287610,
                    1716373332678
                  ]
                ],
                "label": "Locked_4",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[1];",
                "data": [
                  [
                    1716373332678,
                    1716373362678
                  ]
                ],
                "label": "Failed_5",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[2];",
                "data": [
                  [
                    1716373362678,
                    1716373377678
                  ]
                ],
                "label": "Open_6",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[3];",
                "data": [
                  [
                    1716373377678,
                    1716373437612
                  ]
                ],
                "label": "Closed_7",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[0];",
                "data": [
                  [
                    1716373437612,
                    1716373482679
                  ]
                ],
                "label": "Locked_8",
                "stack": "State"
              },
              {
                "backgroundColor": "\u003cscript\u003e return self.custom.colors[1];",
                "data": [
                  [
                    1716373482679,
                    1716373512680
                  ]
                ],
                "label": "Failed_9",
                "stack": "State"
              }
            ],
            "labels": [
              "State"
            ]
          },
          "events": {
            "beforeRender2": "console.log(chart); console.log(chart.getDatasetMeta(1));"
          },
          "options": {
            "indexAxis": "y",
            "plugins": {
              "legend": {
                "display": true,
                "labels": {
                  "filter": "\u003cscript\u003e console.log(context); \nconst text \u003d context.text; \nconsole.log(text); \nconsole.log(options);\n\nlet shouldShow \u003d !text.includes(\u0027_\u0027)\nconsole.log(shouldShow)\n\nif(shouldShow) {\nreturn shouldShow;\n}\n"
                },
                "onClick": "\u003cscript\u003e \nlet event \u003d context; \nlet legendItem \u003d options;\nlet ci \u003d event.chart;\nlet legendItems \u003d ci.legend.legendItems;\nconst index \u003d legendItem.datasetIndex;\nconsole.log(self.custom.colors[1]);\n\nconst state \u003d legendItem.text;\n\nconst hidden \u003d legendItem.hidden;\n\nconst shouldHide \u003d hidden \u003d\u003d\u003d false ? true: false;\n\nlegendItems.forEach(function(item) {\n\tlet index \u003d item.datasetIndex;\n\tlet meta \u003d ci.getDatasetMeta(index);\n\tif (meta.label.startsWith(state)) {\n\t\tmeta.hidden \u003d shouldHide;\n\t}    \n});\nci.update();\n\t\n\t\n"
              },
              "tooltip": {
                "backgroundColor": "#000000cc",
                "bodyAlign": "left",
                "bodyColor": "#fff",
                "bodySpacing": 2,
                "borderColor": "#000",
                "borderWidth": 0,
                "boxHeight": null,
                "boxPadding": null,
                "boxWidth": null,
                "caretPadding": 2,
                "caretSize": 5,
                "cornerRadius": 6,
                "displayColors": true,
                "enabled": true,
                "external": null,
                "filter": null,
                "footerAlign": "left",
                "footerColor": "#fff",
                "footerMarginTop": 6,
                "footerSpacing": 2,
                "intersect": null,
                "itemSort": null,
                "mode": null,
                "multiKeyBackground": "#fff",
                "padding": 6,
                "position": "average",
                "rtl": null,
                "textDirection": "rtl",
                "titleAlign": "left",
                "titleColor": "#fff",
                "titleMarginBottom": 6,
                "titleSpacing": 2,
                "usePointStyle": null,
                "xAlign": null,
                "yAlign": null
              },
              "zoom": {
                "limits": {
                  "x": {
                    "max": "original",
                    "min": "original",
                    "minRange": null
                  },
                  "y": {
                    "max": "original",
                    "min": "original",
                    "minRange": null
                  }
                },
                "pan": {
                  "modifierKey": null
                },
                "zoom": {
                  "wheel": {
                    "modifierKey": null
                  }
                }
              }
            },
            "scales": {
              "x": {
                "max": 1716373512680,
                "min": 1716373182000,
                "stacked": false,
                "type": "time"
              },
              "y": {
                "stacked": true,
                "type": "category"
              }
            }
          },
          "type": "bar"
        },
        "type": "embr.chart.chart-js"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}
benmusson commented 5 months ago

Fixed in https://github.com/mussonindustrial/embr/commit/075a0b9985f73a7f9f022719e83c1ef2ab470857.

The following filter only shows legend items with text 'Dataset 1':

labels: {
  filter: (item) => console.log(item); return item.text == 'Dataset 1';
}