@grafana/scenes 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +60 -0
- package/dist/esm/components/NestedScene.js +8 -0
- package/dist/esm/components/NestedScene.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanel.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanelRenderer.js +30 -5
- package/dist/esm/components/VizPanel/VizPanelRenderer.js.map +1 -1
- package/dist/esm/components/layout/SceneFlexLayout.js +42 -45
- package/dist/esm/components/layout/SceneFlexLayout.js.map +1 -1
- package/dist/esm/components/layout/{SceneGridLayout.js → grid/SceneGridLayout.js} +57 -43
- package/dist/esm/components/layout/grid/SceneGridLayout.js.map +1 -0
- package/dist/esm/components/layout/{SceneGridRow.js → grid/SceneGridRow.js} +13 -14
- package/dist/esm/components/layout/grid/SceneGridRow.js.map +1 -0
- package/dist/esm/components/layout/grid/constants.js.map +1 -0
- package/dist/esm/core/types.js.map +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/variables/interpolation/formatRegistry.js +18 -36
- package/dist/esm/variables/interpolation/formatRegistry.js.map +1 -1
- package/dist/esm/variables/interpolation/sceneInterpolator.js +4 -3
- package/dist/esm/variables/interpolation/sceneInterpolator.js.map +1 -1
- package/dist/esm/variables/macros/AllVariablesMacro.js +4 -3
- package/dist/esm/variables/macros/AllVariablesMacro.js.map +1 -1
- package/dist/esm/variables/variants/MultiValueVariable.js +7 -6
- package/dist/esm/variables/variants/MultiValueVariable.js.map +1 -1
- package/dist/index.d.ts +57 -35
- package/dist/index.js +261 -235
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/dist/esm/components/layout/SceneGridLayout.js.map +0 -1
- package/dist/esm/components/layout/SceneGridRow.js.map +0 -1
- package/dist/esm/components/layout/constants.js.map +0 -1
- /package/dist/esm/components/layout/{constants.js → grid/constants.js} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,63 @@
|
|
|
1
|
+
# v0.2.0 (Wed Mar 29 2023)
|
|
2
|
+
|
|
3
|
+
### Release Notes
|
|
4
|
+
|
|
5
|
+
#### Layout: Create atomic, layout specific objects ([#97](https://github.com/grafana/scenes/pull/97))
|
|
6
|
+
|
|
7
|
+
The interface of `SceneFlexLayout` and `SceneGridLayout` has changed. These scene objects now accept only dedicated layout item objects as children:
|
|
8
|
+
- `SceneFlexItem` for `SceneFlexLayout`
|
|
9
|
+
- `SceneGridItem` and `SceneGridRow` for `SceneGridLayout`
|
|
10
|
+
|
|
11
|
+
`placement` property has been replaced by those layout-specific objects.
|
|
12
|
+
|
|
13
|
+
Example
|
|
14
|
+
```tsx
|
|
15
|
+
// BEFORE
|
|
16
|
+
const layout = new SceneFlexLayout({
|
|
17
|
+
direction: 'column',
|
|
18
|
+
children: [
|
|
19
|
+
new VizPanel({
|
|
20
|
+
placement: {
|
|
21
|
+
width: '50%',
|
|
22
|
+
height: '400',
|
|
23
|
+
},
|
|
24
|
+
...
|
|
25
|
+
})
|
|
26
|
+
],
|
|
27
|
+
...
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
// AFTER
|
|
32
|
+
const layout = new SceneFlexLayout({
|
|
33
|
+
direction: 'column',
|
|
34
|
+
children: [
|
|
35
|
+
new SceneFlexItem({
|
|
36
|
+
width: '50%',
|
|
37
|
+
height: '400',
|
|
38
|
+
body: new VizPanel({ ... }),
|
|
39
|
+
}),
|
|
40
|
+
],
|
|
41
|
+
...
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
#### 🚀 Enhancement
|
|
49
|
+
|
|
50
|
+
- Layout: Create atomic, layout specific objects [#97](https://github.com/grafana/scenes/pull/97) ([@dprokop](https://github.com/dprokop) [@torkelo](https://github.com/torkelo))
|
|
51
|
+
- Interpolation: FormatRegistryID is now replaced by VariableFormatID from schema package [#112](https://github.com/grafana/scenes/pull/112) ([@ryantxu](https://github.com/ryantxu) [@torkelo](https://github.com/torkelo))
|
|
52
|
+
|
|
53
|
+
#### Authors: 3
|
|
54
|
+
|
|
55
|
+
- Dominik Prokop ([@dprokop](https://github.com/dprokop))
|
|
56
|
+
- Ryan McKinley ([@ryantxu](https://github.com/ryantxu))
|
|
57
|
+
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
1
61
|
# v0.1.0 (Mon Mar 27 2023)
|
|
2
62
|
|
|
3
63
|
### Release Notes
|
|
@@ -41,6 +41,11 @@ class NestedScene extends SceneObjectBase {
|
|
|
41
41
|
children: parent.state.children.filter((x) => x !== this)
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
|
+
if (isSceneLayoutItem(parent)) {
|
|
45
|
+
parent.setState({
|
|
46
|
+
body: void 0
|
|
47
|
+
});
|
|
48
|
+
}
|
|
44
49
|
};
|
|
45
50
|
}
|
|
46
51
|
}
|
|
@@ -113,6 +118,9 @@ const getStyles = (theme) => ({
|
|
|
113
118
|
flexGrow: 1
|
|
114
119
|
})
|
|
115
120
|
});
|
|
121
|
+
function isSceneLayoutItem(x) {
|
|
122
|
+
return "body" in x.state;
|
|
123
|
+
}
|
|
116
124
|
|
|
117
125
|
export { NestedScene, NestedSceneRenderer };
|
|
118
126
|
//# sourceMappingURL=NestedScene.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NestedScene.js","sources":["../../../src/components/NestedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Stack } from '@grafana/experimental';\nimport { Button, ToolbarButton, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport {
|
|
1
|
+
{"version":3,"file":"NestedScene.js","sources":["../../../src/components/NestedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Stack } from '@grafana/experimental';\nimport { Button, ToolbarButton, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport {\n SceneObject,\n SceneLayoutChildState,\n SceneComponentProps,\n SceneLayout,\n SceneLayoutItemState,\n} from '../core/types';\n\ninterface NestedSceneState extends SceneLayoutChildState {\n title: string;\n isCollapsed?: boolean;\n canCollapse?: boolean;\n canRemove?: boolean;\n body: SceneLayout;\n actions?: SceneObject[];\n}\n\n/**\n * @internal\n * POC status, don't use this yet\n */\nexport class NestedScene extends SceneObjectBase<NestedSceneState> {\n public static Component = NestedSceneRenderer;\n\n public onToggle = () => {\n this.setState({\n isCollapsed: !this.state.isCollapsed,\n placement: {\n ...this.state.placement,\n ySizing: this.state.isCollapsed ? 'fill' : 'content',\n },\n });\n };\n\n /** Removes itself from its parent's children array */\n public onRemove = () => {\n const parent = this.parent!;\n if ('children' in parent.state) {\n parent.setState({\n children: parent.state.children.filter((x) => x !== this),\n });\n }\n\n if (isSceneLayoutItem(parent)) {\n parent.setState({\n body: undefined,\n });\n }\n };\n}\n\nexport function NestedSceneRenderer({ model }: SceneComponentProps<NestedScene>) {\n const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();\n const styles = useStyles2(getStyles);\n\n const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);\n\n if (canRemove) {\n toolbarActions.push(\n <ToolbarButton\n icon=\"times\"\n variant={'default'}\n onClick={model.onRemove}\n key=\"remove-button\"\n aria-label=\"Remove scene\"\n />\n );\n }\n\n return (\n <div className={styles.row}>\n <div className={styles.rowHeader}>\n <Stack gap={0}>\n <div className={styles.title} role=\"heading\" aria-level={1}>\n {title}\n </div>\n {canCollapse && (\n <div className={styles.toggle}>\n <Button\n size=\"sm\"\n icon={isCollapsed ? 'angle-down' : 'angle-up'}\n fill=\"text\"\n variant=\"secondary\"\n aria-label={isCollapsed ? 'Expand scene' : 'Collapse scene'}\n onClick={model.onToggle}\n />\n </div>\n )}\n </Stack>\n <div className={styles.actions}>{toolbarActions}</div>\n </div>\n {!isCollapsed && <body.Component model={body} />}\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n row: css({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n gap: theme.spacing(1),\n cursor: 'pointer',\n }),\n toggle: css({}),\n title: css({\n fontSize: theme.typography.h5.fontSize,\n }),\n rowHeader: css({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n }),\n actions: css({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n justifyContent: 'flex-end',\n flexGrow: 1,\n }),\n});\n\nfunction isSceneLayoutItem(x: SceneObject): x is SceneObject<SceneLayoutItemState> {\n return 'body' in x.state;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,oBAAoB,eAAkC,CAAA;AAAA,EAA5D,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AAGL,IAAA,IAAA,CAAO,WAAW,MAAM;AACtB,MAAA,IAAA,CAAK,QAAS,CAAA;AAAA,QACZ,WAAA,EAAa,CAAC,IAAA,CAAK,KAAM,CAAA,WAAA;AAAA,QACzB,SAAW,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACN,IAAK,CAAA,KAAA,CAAM,SADL,CAAA,EAAA;AAAA,UAET,OAAS,EAAA,IAAA,CAAK,KAAM,CAAA,WAAA,GAAc,MAAS,GAAA,SAAA;AAAA,SAC7C,CAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH,CAAA;AAGA,IAAA,IAAA,CAAO,WAAW,MAAM;AACtB,MAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AACpB,MAAI,IAAA,UAAA,IAAc,OAAO,KAAO,EAAA;AAC9B,QAAA,MAAA,CAAO,QAAS,CAAA;AAAA,UACd,QAAA,EAAU,OAAO,KAAM,CAAA,QAAA,CAAS,OAAO,CAAC,CAAA,KAAM,MAAM,IAAI,CAAA;AAAA,SACzD,CAAA,CAAA;AAAA,OACH;AAEA,MAAI,IAAA,iBAAA,CAAkB,MAAM,CAAG,EAAA;AAC7B,QAAA,MAAA,CAAO,QAAS,CAAA;AAAA,UACd,IAAM,EAAA,KAAA,CAAA;AAAA,SACP,CAAA,CAAA;AAAA,OACH;AAAA,KACF,CAAA;AAAA,GAAA;AACF,CAAA;AA5Ba,WAAA,CACG,SAAY,GAAA,mBAAA,CAAA;AA6BZ,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAA2C,EAAA;AAC/E,EAAM,MAAA,EAAE,OAAO,WAAa,EAAA,WAAA,EAAa,WAAW,IAAM,EAAA,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACrF,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAM,MAAA,cAAA,GAAA,CAAkB,4BAAW,EAAC,EAAG,IAAI,CAAC,MAAA,qBAAY,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,SAAP,EAAA;AAAA,IAAiB,GAAA,EAAK,OAAO,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,MAAA;AAAA,GAAQ,CAAE,CAAA,CAAA;AAEjH,EAAA,IAAI,SAAW,EAAA;AACb,IAAe,cAAA,CAAA,IAAA;AAAA,sBACZ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QACL,OAAS,EAAA,SAAA;AAAA,QACT,SAAS,KAAM,CAAA,QAAA;AAAA,QACf,GAAI,EAAA,eAAA;AAAA,QACJ,YAAW,EAAA,cAAA;AAAA,OACb,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,GAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,GAAK,EAAA,CAAA;AAAA,GAAA,kBACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,KAAA;AAAA,IAAO,IAAK,EAAA,SAAA;AAAA,IAAU,YAAY,EAAA,CAAA;AAAA,GACtD,EAAA,KACH,CACC,EAAA,WAAA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,MAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,IAAK,EAAA,IAAA;AAAA,IACL,IAAA,EAAM,cAAc,YAAe,GAAA,UAAA;AAAA,IACnC,IAAK,EAAA,MAAA;AAAA,IACL,OAAQ,EAAA,WAAA;AAAA,IACR,YAAA,EAAY,cAAc,cAAiB,GAAA,gBAAA;AAAA,IAC3C,SAAS,KAAM,CAAA,QAAA;AAAA,GACjB,CACF,CAEJ,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,OAAA;AAAA,GAAA,EAAU,cAAe,CAClD,CAAA,EACC,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAChD,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,KAAK,GAAI,CAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,QAAU,EAAA,CAAA;AAAA,IACV,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,MAAQ,EAAA,SAAA;AAAA,GACT,CAAA;AAAA,EACD,MAAA,EAAQ,GAAI,CAAA,EAAE,CAAA;AAAA,EACd,OAAO,GAAI,CAAA;AAAA,IACT,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,EAAG,CAAA,QAAA;AAAA,GAC/B,CAAA;AAAA,EACD,WAAW,GAAI,CAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACrB,CAAA;AAAA,EACD,SAAS,GAAI,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,cAAgB,EAAA,UAAA;AAAA,IAChB,QAAU,EAAA,CAAA;AAAA,GACX,CAAA;AACH,CAAA,CAAA,CAAA;AAEA,SAAS,kBAAkB,CAAwD,EAAA;AACjF,EAAA,OAAO,UAAU,CAAE,CAAA,KAAA,CAAA;AACrB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import {\n AbsoluteTimeRange,\n FieldConfigSource,\n PanelModel,\n PanelPlugin,\n toUtc,\n getPanelOptionsWithDefaults,\n ScopedVars,\n InterpolateFunction,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial,
|
|
1
|
+
{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import {\n AbsoluteTimeRange,\n FieldConfigSource,\n PanelModel,\n PanelPlugin,\n toUtc,\n getPanelOptionsWithDefaults,\n ScopedVars,\n InterpolateFunction,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial, SceneObjectStatePlain } from '../../core/types';\n\nimport { VizPanelRenderer } from './VizPanelRenderer';\nimport { VizPanelMenu } from './VizPanelMenu';\nimport { VariableDependencyConfig } from '../../variables/VariableDependencyConfig';\nimport { VariableCustomFormatterFn } from '../../variables/types';\n\nexport interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneObjectStatePlain {\n title: string;\n description?: string;\n pluginId: string;\n options: DeepPartial<TOptions>;\n fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;\n pluginVersion?: string;\n displayMode?: 'default' | 'transparent';\n hoverHeader?: boolean;\n menu?: VizPanelMenu;\n // internal state\n pluginLoadError?: string;\n isDraggable?: boolean;\n isResizable?: boolean;\n}\n\nexport class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {\n public static Component = VizPanelRenderer;\n\n protected _variableDependency = new VariableDependencyConfig(this, {\n statePaths: ['title', 'options', 'fieldConfig'],\n });\n\n // Not part of state as this is not serializable\n private _plugin?: PanelPlugin;\n\n public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {\n super({\n options: {},\n fieldConfig: { defaults: {}, overrides: [] },\n title: 'Title',\n pluginId: 'timeseries',\n ...state,\n });\n }\n\n public activate() {\n super.activate();\n const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();\n const plugin = getPanelPluginFromCache(this.state.pluginId);\n\n if (plugin) {\n this.pluginLoaded(plugin);\n } else {\n importPanelPlugin(this.state.pluginId)\n .then((result) => this.pluginLoaded(result))\n .catch((err: Error) => {\n this.setState({ pluginLoadError: err.message });\n });\n }\n }\n\n private pluginLoaded(plugin: PanelPlugin) {\n const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;\n\n const panel: PanelModel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion: pluginVersion };\n const currentVersion = this.getPluginVersion(plugin);\n\n if (plugin.onPanelMigration) {\n if (currentVersion !== this.state.pluginVersion) {\n // These migration handlers also mutate panel.fieldConfig to migrate fieldConfig\n panel.options = plugin.onPanelMigration(panel);\n }\n }\n\n const withDefaults = getPanelOptionsWithDefaults({\n plugin,\n currentOptions: panel.options,\n currentFieldConfig: panel.fieldConfig,\n isAfterPluginChange: false,\n });\n\n this._plugin = plugin;\n\n this.setState({\n options: withDefaults.options,\n fieldConfig: withDefaults.fieldConfig,\n pluginVersion: currentVersion,\n });\n }\n\n private getPluginVersion(plugin: PanelPlugin): string {\n return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;\n }\n\n public getPlugin(): PanelPlugin | undefined {\n return this._plugin;\n }\n\n public onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {\n const sceneTimeRange = sceneGraph.getTimeRange(this);\n sceneTimeRange.onTimeRangeChange({\n raw: {\n from: toUtc(timeRange.from),\n to: toUtc(timeRange.to),\n },\n from: toUtc(timeRange.from),\n to: toUtc(timeRange.to),\n });\n };\n\n public onOptionsChange = (options: TOptions) => {\n this.setState({ options });\n };\n\n public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {\n this.setState({ fieldConfig });\n };\n\n public interpolate = ((value: string, scoped?: ScopedVars, format?: string | VariableCustomFormatterFn) => {\n return sceneGraph.interpolate(this, value, scoped, format);\n }) as InterpolateFunction;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -5,10 +5,25 @@ import { getAppEvents } from '@grafana/runtime';
|
|
|
5
5
|
import { useTheme2, PanelChrome, ErrorBoundaryAlert } from '@grafana/ui';
|
|
6
6
|
import { sceneGraph } from '../../core/sceneGraph.js';
|
|
7
7
|
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __objRest = (source, exclude) => {
|
|
12
|
+
var target = {};
|
|
13
|
+
for (var prop in source)
|
|
14
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
15
|
+
target[prop] = source[prop];
|
|
16
|
+
if (source != null && __getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
18
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
19
|
+
target[prop] = source[prop];
|
|
20
|
+
}
|
|
21
|
+
return target;
|
|
22
|
+
};
|
|
8
23
|
function VizPanelRenderer({ model }) {
|
|
9
|
-
var
|
|
24
|
+
var _b;
|
|
10
25
|
const theme = useTheme2();
|
|
11
|
-
const {
|
|
26
|
+
const _a = model.useState(), {
|
|
12
27
|
title,
|
|
13
28
|
description,
|
|
14
29
|
options,
|
|
@@ -16,15 +31,25 @@ function VizPanelRenderer({ model }) {
|
|
|
16
31
|
pluginId,
|
|
17
32
|
pluginLoadError,
|
|
18
33
|
$data,
|
|
19
|
-
placement,
|
|
20
34
|
displayMode,
|
|
21
35
|
hoverHeader,
|
|
22
36
|
menu
|
|
23
|
-
} =
|
|
37
|
+
} = _a, state = __objRest(_a, [
|
|
38
|
+
"title",
|
|
39
|
+
"description",
|
|
40
|
+
"options",
|
|
41
|
+
"fieldConfig",
|
|
42
|
+
"pluginId",
|
|
43
|
+
"pluginLoadError",
|
|
44
|
+
"$data",
|
|
45
|
+
"displayMode",
|
|
46
|
+
"hoverHeader",
|
|
47
|
+
"menu"
|
|
48
|
+
]);
|
|
24
49
|
const [ref, { width, height }] = useMeasure();
|
|
25
50
|
const plugin = model.getPlugin();
|
|
26
51
|
const parentLayout = sceneGraph.getLayout(model);
|
|
27
|
-
const isDraggable = parentLayout.isDraggable() && ((
|
|
52
|
+
const isDraggable = parentLayout.isDraggable() && ((_b = state.isDraggable) != null ? _b : true);
|
|
28
53
|
const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : "";
|
|
29
54
|
const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : "";
|
|
30
55
|
const titleInterpolated = model.interpolate(title, void 0, "text");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\n\nimport { VizPanel } from './VizPanel';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n const theme = useTheme2();\n const {\n title,\n description,\n options,\n fieldConfig,\n pluginId,\n pluginLoadError,\n $data,\n
|
|
1
|
+
{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\n\nimport { VizPanel } from './VizPanel';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n const theme = useTheme2();\n const {\n title,\n description,\n options,\n fieldConfig,\n pluginId,\n pluginLoadError,\n $data,\n displayMode,\n hoverHeader,\n menu,\n ...state\n } = model.useState();\n const [ref, { width, height }] = useMeasure();\n const plugin = model.getPlugin();\n const parentLayout = sceneGraph.getLayout(model);\n\n // If parent has enabled dragging and we have not explicitly disabled it then dragging is enabled\n const isDraggable = parentLayout.isDraggable() && (state.isDraggable ?? true);\n const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : '';\n const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : '';\n\n // Interpolate title\n const titleInterpolated = model.interpolate(title, undefined, 'text');\n\n // Not sure we need to subscribe to this state\n const timeZone = sceneGraph.getTimeRange(model).state.timeZone;\n\n // Subscribe to data and apply field overrides\n const { data } = sceneGraph.getData(model).useState();\n const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, model.interpolate);\n\n if (pluginLoadError) {\n return <div>Failed to load plugin: {pluginLoadError}</div>;\n }\n\n if (!plugin || !plugin.hasPluginId(pluginId)) {\n return <div>Loading plugin panel...</div>;\n }\n\n if (!plugin.panel) {\n return <div>Panel plugin has no panel component</div>;\n }\n\n const PanelComponent = plugin.panel;\n\n // If we have a query runner on our level inform it of the container width (used to set auto max data points)\n if ($data && $data.setContainerWidth) {\n $data.setContainerWidth(width);\n }\n\n const titleItems: React.ReactNode[] = [];\n\n // If we have local time range show that in panel header\n if (model.state.$timeRange) {\n titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} />);\n }\n\n let panelMenu;\n if (menu) {\n panelMenu = <menu.Component model={menu} />;\n }\n\n return (\n <div ref={ref as RefCallback<HTMLDivElement>} style={{ position: 'absolute', width: '100%', height: '100%' }}>\n <PanelChrome\n title={titleInterpolated}\n description={description ? () => model.interpolate(description) : ''}\n loadingState={dataWithOverrides?.state}\n statusMessage={dataWithOverrides?.error ? dataWithOverrides.error.message : ''}\n width={width}\n height={height}\n displayMode={displayMode}\n hoverHeader={hoverHeader}\n titleItems={titleItems}\n dragClass={dragClass}\n dragClassCancel={dragClassCancel}\n menu={panelMenu}\n >\n {(innerWidth, innerHeight) => (\n <>\n {!dataWithOverrides && <div>No data...</div>}\n {dataWithOverrides && (\n <ErrorBoundaryAlert dependencies={[plugin, data]}>\n <PluginContextProvider meta={plugin.meta}>\n <PanelComponent\n id={1}\n data={dataWithOverrides}\n title={title}\n timeRange={dataWithOverrides.timeRange}\n timeZone={timeZone}\n options={options}\n fieldConfig={fieldConfig}\n transparent={false}\n width={innerWidth}\n height={innerHeight}\n renderCounter={0}\n replaceVariables={model.interpolate}\n onOptionsChange={model.onOptionsChange}\n onFieldConfigChange={model.onFieldConfigChange}\n onChangeTimeRange={model.onChangeTimeRange}\n eventBus={getAppEvents()}\n />\n </PluginContextProvider>\n </ErrorBoundaryAlert>\n )}\n </>\n )}\n </PanelChrome>\n </div>\n );\n}\n\nVizPanelRenderer.displayName = 'ScenePanelRenderer';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Field, RadioButtonGroup } from '@grafana/ui';
|
|
3
2
|
import { SceneObjectBase } from '../../core/SceneObjectBase.js';
|
|
4
3
|
|
|
5
4
|
class SceneFlexLayout extends SceneObjectBase {
|
|
@@ -12,87 +11,85 @@ class SceneFlexLayout extends SceneObjectBase {
|
|
|
12
11
|
return false;
|
|
13
12
|
}
|
|
14
13
|
}
|
|
15
|
-
SceneFlexLayout.Component =
|
|
16
|
-
|
|
17
|
-
function FlexLayoutRenderer({ model }) {
|
|
14
|
+
SceneFlexLayout.Component = SceneFlexLayoutRenderer;
|
|
15
|
+
function SceneFlexLayoutRenderer({ model }) {
|
|
18
16
|
const { direction = "row", children, wrap } = model.useState();
|
|
19
17
|
const style = {
|
|
18
|
+
display: "flex",
|
|
20
19
|
flexGrow: 1,
|
|
21
20
|
flexDirection: direction,
|
|
22
|
-
display: "flex",
|
|
23
21
|
gap: "8px",
|
|
24
|
-
flexWrap: wrap,
|
|
22
|
+
flexWrap: wrap || "nowrap",
|
|
25
23
|
alignContent: "baseline",
|
|
26
24
|
minHeight: 0
|
|
27
25
|
};
|
|
28
26
|
return /* @__PURE__ */ React.createElement("div", {
|
|
29
27
|
style
|
|
30
|
-
}, children.map((item) => /* @__PURE__ */ React.createElement(
|
|
28
|
+
}, children.map((item) => /* @__PURE__ */ React.createElement(item.Component, {
|
|
31
29
|
key: item.state.key,
|
|
32
|
-
item
|
|
33
|
-
direction
|
|
30
|
+
model: item
|
|
34
31
|
})));
|
|
35
32
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
})
|
|
41
|
-
const
|
|
33
|
+
class SceneFlexItem extends SceneObjectBase {
|
|
34
|
+
}
|
|
35
|
+
SceneFlexItem.Component = SceneFlexItemRenderer;
|
|
36
|
+
function SceneFlexItemRenderer({ model }) {
|
|
37
|
+
const { body } = model.useState();
|
|
38
|
+
const parent = model.parent;
|
|
39
|
+
let style = {};
|
|
40
|
+
if (parent && isSceneFlexLayout(parent)) {
|
|
41
|
+
style = getFlexItemItemStyles(parent.state.direction || "row", model);
|
|
42
|
+
} else {
|
|
43
|
+
throw new Error("SceneFlexItem must be a child of SceneFlexLayout");
|
|
44
|
+
}
|
|
45
|
+
if (!body) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
42
48
|
return /* @__PURE__ */ React.createElement("div", {
|
|
43
|
-
style
|
|
44
|
-
}, /* @__PURE__ */ React.createElement(
|
|
45
|
-
model:
|
|
49
|
+
style
|
|
50
|
+
}, /* @__PURE__ */ React.createElement(body.Component, {
|
|
51
|
+
model: body
|
|
46
52
|
}));
|
|
47
53
|
}
|
|
48
|
-
function
|
|
49
|
-
const { xSizing = "fill", ySizing = "fill" } =
|
|
54
|
+
function getFlexItemItemStyles(direction, item) {
|
|
55
|
+
const { xSizing = "fill", ySizing = "fill" } = item.state;
|
|
50
56
|
const style = {
|
|
51
57
|
display: "flex",
|
|
58
|
+
position: "relative",
|
|
52
59
|
flexDirection: direction,
|
|
53
|
-
minWidth:
|
|
54
|
-
minHeight:
|
|
55
|
-
|
|
60
|
+
minWidth: item.state.minWidth,
|
|
61
|
+
minHeight: item.state.minHeight,
|
|
62
|
+
maxWidth: item.state.maxWidth,
|
|
63
|
+
maxHeight: item.state.maxHeight
|
|
56
64
|
};
|
|
57
65
|
if (direction === "column") {
|
|
58
|
-
if (
|
|
59
|
-
style.height =
|
|
66
|
+
if (item.state.height) {
|
|
67
|
+
style.height = item.state.height;
|
|
60
68
|
} else {
|
|
61
69
|
style.flexGrow = ySizing === "fill" ? 1 : 0;
|
|
62
70
|
}
|
|
63
|
-
if (
|
|
64
|
-
style.width =
|
|
71
|
+
if (item.state.width) {
|
|
72
|
+
style.width = item.state.width;
|
|
65
73
|
} else {
|
|
66
74
|
style.alignSelf = xSizing === "fill" ? "stretch" : "flex-start";
|
|
67
75
|
}
|
|
68
76
|
} else {
|
|
69
|
-
if (
|
|
70
|
-
style.height =
|
|
77
|
+
if (item.state.height) {
|
|
78
|
+
style.height = item.state.height;
|
|
71
79
|
} else {
|
|
72
80
|
style.alignSelf = ySizing === "fill" ? "stretch" : "flex-start";
|
|
73
81
|
}
|
|
74
|
-
if (
|
|
75
|
-
style.width =
|
|
82
|
+
if (item.state.width) {
|
|
83
|
+
style.width = item.state.width;
|
|
76
84
|
} else {
|
|
77
85
|
style.flexGrow = xSizing === "fill" ? 1 : 0;
|
|
78
86
|
}
|
|
79
87
|
}
|
|
80
88
|
return style;
|
|
81
89
|
}
|
|
82
|
-
function
|
|
83
|
-
|
|
84
|
-
const options = [
|
|
85
|
-
{ icon: "arrow-right", value: "row" },
|
|
86
|
-
{ icon: "arrow-down", value: "column" }
|
|
87
|
-
];
|
|
88
|
-
return /* @__PURE__ */ React.createElement(Field, {
|
|
89
|
-
label: "Direction"
|
|
90
|
-
}, /* @__PURE__ */ React.createElement(RadioButtonGroup, {
|
|
91
|
-
options,
|
|
92
|
-
value: direction,
|
|
93
|
-
onChange: (value) => model.setState({ direction: value })
|
|
94
|
-
}));
|
|
90
|
+
function isSceneFlexLayout(model) {
|
|
91
|
+
return model instanceof SceneFlexLayout;
|
|
95
92
|
}
|
|
96
93
|
|
|
97
|
-
export { SceneFlexLayout };
|
|
94
|
+
export { SceneFlexItem, SceneFlexLayout };
|
|
98
95
|
//# sourceMappingURL=SceneFlexLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport {\n SceneComponentProps,\n SceneLayout,\n SceneObjectStatePlain,\n SceneObject,\n SceneLayoutItemState,\n} from '../../core/types';\n\nexport interface SceneFlexItemLike extends SceneObject<SceneFlexItemState> {}\n\ninterface SceneFlexLayoutState extends SceneObjectStatePlain {\n direction?: CSSProperties['flexDirection'];\n wrap?: CSSProperties['flexWrap'];\n children: SceneFlexItemLike[];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {\n public static Component = SceneFlexLayoutRenderer;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneFlexLayoutRenderer({ model }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row', children, wrap } = model.useState();\n const style: CSSProperties = {\n display: 'flex',\n flexGrow: 1,\n flexDirection: direction,\n gap: '8px',\n flexWrap: wrap || 'nowrap',\n alignContent: 'baseline',\n minHeight: 0,\n };\n\n return (\n <div style={style}>\n {children.map((item) => (\n <item.Component key={item.state.key} model={item} />\n ))}\n </div>\n );\n}\n\ninterface SceneFlexItemState extends SceneLayoutItemState {\n flexGrow?: CSSProperties['flexGrow'];\n alignSelf?: CSSProperties['alignSelf'];\n width?: CSSProperties['width'];\n height?: CSSProperties['height'];\n minWidth?: CSSProperties['minWidth'];\n minHeight?: CSSProperties['minHeight'];\n maxWidth?: CSSProperties['maxWidth'];\n maxHeight?: CSSProperties['maxHeight'];\n xSizing?: 'fill' | 'content';\n ySizing?: 'fill' | 'content';\n}\n\nexport class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {\n public static Component = SceneFlexItemRenderer;\n}\n\nfunction SceneFlexItemRenderer({ model }: SceneComponentProps<SceneFlexItem>) {\n const { body } = model.useState();\n const parent = model.parent;\n let style: CSSProperties = {};\n\n if (parent && isSceneFlexLayout(parent)) {\n style = getFlexItemItemStyles(parent.state.direction || 'row', model);\n } else {\n throw new Error('SceneFlexItem must be a child of SceneFlexLayout');\n }\n\n if (!body) {\n return null;\n }\n\n return (\n <div style={style}>\n <body.Component model={body} />\n </div>\n );\n}\nfunction getFlexItemItemStyles(direction: CSSProperties['flexDirection'], item: SceneFlexItem) {\n const { xSizing = 'fill', ySizing = 'fill' } = item.state;\n\n const style: CSSProperties = {\n display: 'flex',\n position: 'relative',\n flexDirection: direction,\n minWidth: item.state.minWidth,\n minHeight: item.state.minHeight,\n maxWidth: item.state.maxWidth,\n maxHeight: item.state.maxHeight,\n };\n\n if (direction === 'column') {\n if (item.state.height) {\n style.height = item.state.height;\n } else {\n style.flexGrow = ySizing === 'fill' ? 1 : 0;\n }\n\n if (item.state.width) {\n style.width = item.state.width;\n } else {\n style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n }\n } else {\n if (item.state.height) {\n style.height = item.state.height;\n } else {\n style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n }\n\n if (item.state.width) {\n style.width = item.state.width;\n } else {\n style.flexGrow = xSizing === 'fill' ? 1 : 0;\n }\n }\n\n return style;\n}\n\nfunction isSceneFlexLayout(model: SceneObject): model is SceneFlexLayout {\n return model instanceof SceneFlexLayout;\n}\n"],"names":[],"mappings":"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"}
|