Generated by XState Viz: https://xstate.js.org/viz

machine.js

let widgetSettingsMachine = Machine({
  id: 'widgetSettings',
  context: {},
  type: "parallel",
  states: {
    general: {
      on: {
        CHANGE_NAME: {
          actions: "updateName"
        },
        CHANGE_REFRESH_INTERVAL: {
          actions: "updateRefreshInterval"
        }
      }
    },
    dataSource: {
      initial: "empty",
      states: {
        empty: {
          on: {
            CHANGE_DATA_SOURCE: "selected"
          }
        },
        selected: {
          entry: "updateDataSource",
          exit: "cleanupDataSource",
          type: "parallel",
          states: {
            series: {
               exit: "cleanupSeries",
              initial: "pristine",
              states: {
                pristine: {
                  entry: "resetSeries"
                },
                dirty: {
                  entry: "toggleSerie"
                }
              },
              on: {
                TOGGLE_SERIE: "series.dirty"
              }
            },
            timeframe: {
              exit: "cleanupTimeframe",
              initial: "pristine",
              states: {
                pristine: {
                  entry: "resetTimeframe"
                },
                dirty: {
                  entry: "updateTimeframe"
                }
              },
              on: {
                CHANGE_TIMEFRAME: "timeframe.dirty"
              }
            },
            interval: {
              exit: "cleanupInterval",
              initial: "init",
              states: {
                init: {
                  on: {
                    "": [
                      {
                        target: "pristine",
                        cond: "canChangeInterval"
                      },
                      {
                        target: "disabled"
                      }
                    ]
                  }
                },
                disabled: {},
                pristine: {
                  entry: "resetInterval"
                },
                dirty: {
                  entry: "updateInterval"
                }
              },
              on: {
                CHANGE_INTERVAL: "interval.dirty"
              }
            },
            visualizationType: {
              exit: "cleanupVisualizationType",
              initial: "pristine",
              states: {
                pristine: {
                  entry: "resetVisualizationType"
                },
                dirty: {
                  entry: "updateVisualizationType"
                }
              },
              on: {
                CHANGE_VISUALIZATION_TYPE: "visualizationType.dirty"
              }
            },
            legendPosition: {
              exit: "cleanupLegendPosition",
              initial: "init",
              states: {
                init: {
                  on: {
                    "": [
                      {
                        target: "pristine",
                        cond: "canChangeLegendPosition"
                      },
                      {
                        target: "hidden"
                      }
                    ]
                  }
                },
                hidden: {},
                pristine: {
                  entry: "resetLegendPosition"
                },
                dirty: {
                  entry: "updateLegendPosition"
                }
              },
              on: {
                CHANGE_LEGEND_POSITION: "legendPosition.dirty"
              }
            }
          },
          on: {
            CHANGE_DATA_SOURCE: "selected",
            CLEANUP_DATA_SOURCE: "empty"
          }
        }
      }
    }
  }
},
{
  guards: {
    canChangeInterval: () => true,
    canChangeLegendPosition: () => true
  },
  actions: {
    updateDataSource: () =>
      console.log("updating data source")
  }
});