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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const widgetSettingsMachine = Machine({
    id: 'widgetSettings',
    context: {
      name: null,
      refreshInterval: 30,
      metric: null,
      breakdown: [],
      timeframe: null,
      interval: null,
      chart: {
        type: null,
        lineInterpolationType: null,
        legendPosition: null
      },
      validationErrors: {
        general: null,
        metric: null,
        chart: null
      }
    },
    initial: 'idle',
    states: {
      idle: {
        initial: "hist",
        states: {
          hist: {
            type: "history",
            target: "general"
          },
          general: {
            on: {
              CHANGE_NAME: {
                actions: "updateName"
              },
              CHANGE_REFRESH_INTERVAL: {
                actions: "updateRefreshInterval"
              }
            }
          },
          metric: {
            on: {
              CHANGE_METRIC: {
                actions: [
                  "updateMetric",
                  "resetInterval",
                  "resetChartType"
                ]
              },
              CHANGE_BREAKDOWN: {
                actions: "updateBreakdown"
              },
              CHANGE_TIMEFRAME: {
                actions: "updateTimeframe"
              },
              CHANGE_INTERVAL: {
                actions: "updateInterval"
              }
            }
          },
          chart: {
            on: {
              UPDATE_CHART_TYPE: {
                actions: [
                  "updateChartType",
                  "resetLineInterpolationType",
                  "resetLegendPosition"
                ]
              },
              UPDATE_LINE_INTERPOLATION_TYPE: {
                actions: "updateLineInterpolationType"
              },
              UPDATE_LEGEND_POSITION: {
                actions: "updateLegendPosition"
              }
            }
          }
        },
        on: {
          GO_TO_GENERAL: ".general",
          GO_TO_METRIC: ".metric",
          GO_TO_CHART: ".chart",
          SAVE_SETTINGS: "validating"
        }
      },
      validating: {
        invoke: {
          src: "validateSettings",
          onDone: {
            target: "saving",
            actions: "resetValidationErrors"
          },
          onError: [
            {
              target: "idle.general",
              actions: "setValidationErrors",
              cond: "isGeneralInvalid"
            },
            {
              target: "idle.metric",
              actions: "setValidationErrors",
              cond: "isMetricInvalid"
            },
            {
              target: "idle.chart",
              actions: "setValidationErrors",
              cond: "isChartInvalid"
            }
          ]
        }
      },
      saving: {
        initial: "loading",
        states: {
          loading: {
            invoke: {
              src: "saveSettings",
              onDone: "success"
            }
          },
          success: {
            entry: "notifySuccess",
            type: "final"
          },
          failure: {
            entry: "notifyFailure",
            on: {
              RETRY: "loading"
            }
          }
        },
        onDone: "idle"
      }
    }
  });