@grafana/scenes 5.27.0--canary.912.12014950388.0 → 5.27.0--canary.912.12015161109.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.
|
@@ -15,16 +15,16 @@ class LimitFramesTitleItemScene extends SceneObjectBase {
|
|
|
15
15
|
this.addActivationHandler(this.onActivate.bind(this));
|
|
16
16
|
}
|
|
17
17
|
onActivate() {
|
|
18
|
-
var _a;
|
|
19
18
|
const panel = sceneGraph.getAncestor(this, VizPanel);
|
|
20
19
|
const $transformedDataArray = sceneGraph.findAllObjects(panel, (scene) => scene.state.key === LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY);
|
|
21
20
|
const $transformedData = $transformedDataArray[0];
|
|
22
21
|
if ($transformedData) {
|
|
23
|
-
const $
|
|
22
|
+
const $untransformedDataProviders = sceneGraph.findAllObjects($transformedData, (scene) => scene instanceof SceneDataTransformer || scene instanceof SceneQueryRunner);
|
|
23
|
+
const $untransformedDataProvider = $untransformedDataProviders[0];
|
|
24
24
|
this._subs.add(
|
|
25
25
|
$transformedData.subscribeToState((transformedDataState) => {
|
|
26
|
-
var
|
|
27
|
-
if ($untransformedDataProvider && ((
|
|
26
|
+
var _a, _b, _c;
|
|
27
|
+
if ($untransformedDataProvider && ((_a = $untransformedDataProvider.state.data) == null ? void 0 : _a.series.length) !== this.state.currentFrameCount) {
|
|
28
28
|
this.setState({
|
|
29
29
|
currentFrameCount: (_b = transformedDataState.data) == null ? void 0 : _b.series.length,
|
|
30
30
|
totalFrameCount: (_c = $untransformedDataProvider.state.data) == null ? void 0 : _c.series.length
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LimitFramesTitleItemScene.js","sources":["../../../src/components/LimitFramesTitleItemScene.tsx"],"sourcesContent":["import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';\nimport React from 'react';\nimport { DataFrame, GrafanaTheme2 } from '@grafana/data';\nimport { css } from '@emotion/css';\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { map, Observable } from 'rxjs';\nimport { SceneComponentProps, SceneDataProvider, SceneObjectState } from '../core/types';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneDataTransformer } from '../querying/SceneDataTransformer';\nimport { VizPanel } from './VizPanel/VizPanel';\nimport { SceneQueryRunner } from '../querying/SceneQueryRunner';\n\nexport interface LimitFramesTitleItemSceneState extends SceneObjectState {\n showAllFrames?: boolean;\n currentFrameCount?: number;\n totalFrameCount?: number\n frameLimit: number\n}\n\nexport const LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY = 'limit_frames_title_item_transformation'\n\n/**\n * PanelBuilder titleItems component that will limit the default number of series rendered\n *\n * Usage:\n * PanelBuilders.timeseries()\n * .setData($data)\n * .setTitleItems([new LimitFramesTitleItemScene({\n * frameLimit: 20, // limits the default number of series that are rendered in the viz\n * })])\n */\nexport class LimitFramesTitleItemScene extends SceneObjectBase<LimitFramesTitleItemSceneState> {\n public constructor(state: LimitFramesTitleItemSceneState) {\n super(state);\n this.addActivationHandler(this.onActivate.bind(this));\n }\n\n private onActivate() {\n const panel = sceneGraph.getAncestor(this, VizPanel);\n\n const $transformedDataArray = sceneGraph.findAllObjects(panel, (scene) => scene.state.key === LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY)\n const $transformedData = $transformedDataArray[0] as SceneDataTransformer | undefined;\n\n if($transformedData){\n const $
|
|
1
|
+
{"version":3,"file":"LimitFramesTitleItemScene.js","sources":["../../../src/components/LimitFramesTitleItemScene.tsx"],"sourcesContent":["import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';\nimport React from 'react';\nimport { DataFrame, GrafanaTheme2 } from '@grafana/data';\nimport { css } from '@emotion/css';\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { map, Observable } from 'rxjs';\nimport { SceneComponentProps, SceneDataProvider, SceneObjectState } from '../core/types';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneDataTransformer } from '../querying/SceneDataTransformer';\nimport { VizPanel } from './VizPanel/VizPanel';\nimport { SceneQueryRunner } from '../querying/SceneQueryRunner';\n\nexport interface LimitFramesTitleItemSceneState extends SceneObjectState {\n showAllFrames?: boolean;\n currentFrameCount?: number;\n totalFrameCount?: number\n frameLimit: number\n}\n\nexport const LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY = 'limit_frames_title_item_transformation'\n\n/**\n * PanelBuilder titleItems component that will limit the default number of series rendered\n *\n * Usage:\n * PanelBuilders.timeseries()\n * .setData($data)\n * .setTitleItems([new LimitFramesTitleItemScene({\n * frameLimit: 20, // limits the default number of series that are rendered in the viz\n * })])\n */\nexport class LimitFramesTitleItemScene extends SceneObjectBase<LimitFramesTitleItemSceneState> {\n public constructor(state: LimitFramesTitleItemSceneState) {\n super(state);\n this.addActivationHandler(this.onActivate.bind(this));\n }\n\n private onActivate() {\n const panel = sceneGraph.getAncestor(this, VizPanel);\n\n const $transformedDataArray = sceneGraph.findAllObjects(panel, (scene) => scene.state.key === LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY)\n const $transformedData = $transformedDataArray[0] as SceneDataTransformer | undefined;\n\n if($transformedData){\n const $untransformedDataProviders = sceneGraph.findAllObjects($transformedData, (scene) => scene instanceof SceneDataTransformer || scene instanceof SceneQueryRunner)\n const $untransformedDataProvider = $untransformedDataProviders[0] as SceneDataProvider | undefined\n\n // Subscribe to data changes and update the frame counts\n this._subs.add(\n $transformedData.subscribeToState((transformedDataState) => {\n if ($untransformedDataProvider && $untransformedDataProvider.state.data?.series.length !== this.state.currentFrameCount) {\n this.setState({\n currentFrameCount: transformedDataState.data?.series.length,\n totalFrameCount: $untransformedDataProvider.state.data?.series.length\n });\n }\n })\n );\n }\n }\n\n /**\n * Removes the default series limit and renders all series in the viz\n */\n public showAllSeries () {\n const $data = sceneGraph.getData(this);\n if($data instanceof SceneDataTransformer){\n $data.setState({\n transformations: [],\n });\n this.setState({\n showAllFrames: true,\n });\n $data.reprocessTransformations();\n }\n }\n public static Component = ({ model }: SceneComponentProps<LimitFramesTitleItemScene>) => {\n const { showAllFrames, currentFrameCount, frameLimit, totalFrameCount, } = model.useState();\n const styles = useStyles2(getStyles);\n\n if (\n totalFrameCount === undefined ||\n showAllFrames ||\n !currentFrameCount ||\n totalFrameCount < frameLimit\n ) {\n return null;\n }\n\n return (\n <div className={styles.timeSeriesDisclaimer}>\n <span className={styles.warningMessage}>\n <>\n <Icon\n title={`Showing only ${model.state.frameLimit} series`}\n name=\"exclamation-triangle\"\n aria-hidden=\"true\"\n />\n </>\n </span>\n <Tooltip content={'Rendering too many series in a single panel may impact performance and make data harder to read.'}>\n <Button variant=\"secondary\" size=\"sm\" onClick={() => model.showAllSeries()}>\n <>Show all {totalFrameCount}</>\n </Button>\n </Tooltip>\n </div>\n );\n };\n}\n\nexport function limitFramesTransformation(limit: number) {\n return (source: Observable<DataFrame[]>) => {\n return source.pipe(\n map((frames) => {\n return frames.slice(0, limit);\n })\n );\n };\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n timeSeriesDisclaimer: css({\n label: 'time-series-disclaimer',\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n }),\n warningMessage: css({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(0.5),\n color: theme.colors.warning.main,\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n});\n"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -11581,16 +11581,16 @@ class LimitFramesTitleItemScene extends SceneObjectBase {
|
|
|
11581
11581
|
this.addActivationHandler(this.onActivate.bind(this));
|
|
11582
11582
|
}
|
|
11583
11583
|
onActivate() {
|
|
11584
|
-
var _a;
|
|
11585
11584
|
const panel = sceneGraph.getAncestor(this, VizPanel);
|
|
11586
11585
|
const $transformedDataArray = sceneGraph.findAllObjects(panel, (scene) => scene.state.key === LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY);
|
|
11587
11586
|
const $transformedData = $transformedDataArray[0];
|
|
11588
11587
|
if ($transformedData) {
|
|
11589
|
-
const $
|
|
11588
|
+
const $untransformedDataProviders = sceneGraph.findAllObjects($transformedData, (scene) => scene instanceof SceneDataTransformer || scene instanceof SceneQueryRunner);
|
|
11589
|
+
const $untransformedDataProvider = $untransformedDataProviders[0];
|
|
11590
11590
|
this._subs.add(
|
|
11591
11591
|
$transformedData.subscribeToState((transformedDataState) => {
|
|
11592
|
-
var
|
|
11593
|
-
if ($untransformedDataProvider && ((
|
|
11592
|
+
var _a, _b, _c;
|
|
11593
|
+
if ($untransformedDataProvider && ((_a = $untransformedDataProvider.state.data) == null ? void 0 : _a.series.length) !== this.state.currentFrameCount) {
|
|
11594
11594
|
this.setState({
|
|
11595
11595
|
currentFrameCount: (_b = transformedDataState.data) == null ? void 0 : _b.series.length,
|
|
11596
11596
|
totalFrameCount: (_c = $untransformedDataProvider.state.data) == null ? void 0 : _c.series.length
|