Switch to createDataFrame (#1133)

grafana · Sep 27, 2024 · 6567dec · 6567dec
1 parent 6e76750
commit 6567dec
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 7 deletions.
diff --git a/...urus/docs/how-to-guides/data-source-plugins/add-features-for-explore-queries.md b/...urus/docs/how-to-guides/data-source-plugins/add-features-for-explore-queries.md
@@ -66,7 +66,7 @@ However, if you want a custom visualization, you can add a hint to your returned
 Construct a data frame with specific metadata like this:
 
 ```ts
-const firstResult = new MutableDataFrame({
+const firstResult = createDataFrame({
     fields: [...],
     meta: {
         preferredVisualisationType: 'logs',

diff --git a/docusaurus/docs/tutorials/build-a-data-source-plugin.md b/docusaurus/docs/tutorials/build-a-data-source-plugin.md
@@ -106,7 +106,7 @@ Let's see how to create and return a data frame from the `query` method. In this
 1. Create a data frame with a time field and a number field:
 
    ```ts title="src/datasource.ts"
-   const frame = new MutableDataFrame({
+   const frame = createDataFrame({
      refId: query.refId,
      fields: [
        { name: 'time', type: FieldType.time },

diff --git a/packages/create-plugin/templates/common/_package.json b/packages/create-plugin/templates/common/_package.json
@@ -31,7 +31,6 @@
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@types/jest": "^29.5.0",
-    "@types/lodash": "^4.14.194",
     "@types/node": "^20.8.7",{{#unless useReactRouterV6}}
     "@types/react-router-dom": "^{{ reactRouterVersion }}",{{/unless}}
     "@types/testing-library__jest-dom": "5.14.8",

diff --git a/packages/create-plugin/templates/datasource/src/datasource.ts b/packages/create-plugin/templates/datasource/src/datasource.ts
@@ -5,13 +5,12 @@ import {
   DataQueryResponse,
   DataSourceApi,
   DataSourceInstanceSettings,
-  MutableDataFrame,
+  createDataFrame,
   FieldType,
 } from '@grafana/data';
 
 import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY, DataSourceResponse } from './types';
 import { lastValueFrom } from 'rxjs';
-import _ from 'lodash';
 
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
   baseUrl: string;
@@ -37,7 +36,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
 
     // Return a constant for each query.
     const data = options.targets.map((target) => {
-      return new MutableDataFrame({
+      return createDataFrame({
         refId: target.refId,
         fields: [
           { name: 'Time', values: [from, to], type: FieldType.time },
@@ -77,7 +76,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
       }
     } catch (err) {
       let message = '';
-      if (_.isString(err)) {
+      if (typeof err === 'string') {
         message = err;
       } else if (isFetchError(err)) {
         message = 'Fetch error: ' + (err.statusText ? err.statusText : defaultErrorMessage);