add better information to readme

Author: hoptical

README.md

@@ -1,20 +1,62 @@
-# Grafana Data Source Plugin Template
+# Nodegraph API Plugin for Grafana
 
 [![Build](https://github.com/grafana/grafana-starter-datasource/workflows/CI/badge.svg)](https://github.com/grafana/grafana-starter-datasource/actions?query=workflow%3A%22CI%22)
 
-This template is a starting point for building Grafana Data Source Plugins
+This plugin provides a datasource to connect a REST API to [nodegraph](https://grafana.com/docs/grafana/latest/visualizations/node-graph/) panel of Grafana.
+
+![](src/img/graph-example.png)
 
 ## What is Grafana Data Source Plugin?
 
 Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana Data Source Plugins enables integrating such solutions with Grafana.
 
+
+
 ## Getting started
 
+1. Use Grafana 7.4 or higher
+
+- Download and place the datasouce in grafana/plugins directory.
+
+This plugin is not signed yet, Grafana will not allow loading it by default. you should enable it by adding:
+
+for example, if you are using Grafana with containers, add:
+
+```yaml
+-e "GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=hamedkarbasi93-nodegraphapi-datasource"
+```
+
+2. You can now add the the data source. Just enter the url of your API app and push "Save & Test". You will get an error in case of connection failure. 
+
+   > Note: The browser should have access to the application not the grafana server.
+
+![](src/img/add-datasource.png)
+
+3. In grafana dashboard, pick the Nodegraph panel and have the graph visualization.
+
+## API Configuration
+
+You REST API application should return data in the following format:
+
+endpoint: `/api/fetchgraph`
+
+content type: `application/json`
+
+Data Format example:
+
+```json
+{"edges":[{"id":"1","mainStat":"53/s","source":"1","target":"2"}],"nodes":[{"arc__failed":0.7,"arc__passed":0.3,"detail__zone":"load","id":"1","subTitle":"instance:#2","title":"Service1"},{"arc__failed":0.5,"arc__passed":0.5,"detail__zone":"transform","id":"2","subTitle":"instance:#3","title":"Service2"}]}
+```
+
+For more detail of the variables please visit [here](https://grafana.com/docs/grafana/latest/visualizations/node-graph/#data-api).
+
+## Compiling the data source by yourself
+
 1. Install dependencies
 
-   ```bash
-   yarn install
-   ```
+```bash
+yarn install
+```
 
 2. Build plugin in development mode or run in watch mode
 
@@ -40,3 +82,14 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
 - [Grafana documentation](https://grafana.com/docs/)
 - [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
 - [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System
+
+
+
+## Contributing
+
+Thank you for considering contributing! If you find an issue, or have a better way to do something, feel free to open an issue, or a PR.
+
+## License
+
+This repository is open-sourced software licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).
+

src/ConfigEditor.tsx

@@ -10,15 +10,6 @@ interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions>
 interface State {}
 
 export class ConfigEditor extends PureComponent<Props, State> {
-  onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-    const jsonData = {
-      ...options.jsonData,
-      path: event.target.value,
-    };
-    onOptionsChange({ ...options, jsonData });
-  };
-
   // Secure field (only sent to the backend)
   onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { onOptionsChange, options } = this.props;
@@ -60,16 +51,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
     return (
       <div className="gf-form-group">
-        <div className="gf-form">
-          <FormField
-            label="Path"
-            labelWidth={6}
-            inputWidth={20}
-            onChange={this.onPathChange}
-            value={jsonData.path || ''}
-            placeholder="json field returned to frontend"
-          />
-        </div>
         <div className="gf-form">
           <FormField
             label="URL"

src/QueryEditor.tsx

@@ -23,16 +23,9 @@ export class QueryEditor extends PureComponent<Props> {
     onRunQuery();
   };
 
-  onFrequencyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query, onRunQuery } = this.props;
-    onChange({ ...query, frequency: parseFloat(event.target.value) });
-    // executes the query
-    onRunQuery();
-  };
-
   render() {
     const query = defaults(this.props.query, defaultQuery);
-    const { queryText, constant, frequency } = query;
+    const { queryText, constant } = query;
     return (
       <div className="gf-form">
         <FormField
@@ -50,7 +43,6 @@ export class QueryEditor extends PureComponent<Props> {
           label="Query Text"
           tooltip="Not used yet"
         />
-        <FormField width={4} value={frequency} onChange={this.onFrequencyChange} label="Frequency" type="number" />
       </div>
     );
   }

src/img/add-datasource.png

@@ -3,19 +3,16 @@ import { DataQuery, DataSourceJsonData } from '@grafana/data';
 export interface MyQuery extends DataQuery {
   queryText?: string;
   constant: number;
-  frequency: number;
 }
 
 export const defaultQuery: Partial<MyQuery> = {
   constant: 6.5,
-  frequency: 1.0,
 };
 
 /**
  * These are options configured for each DataSource instance
  */
 export interface MyDataSourceOptions extends DataSourceJsonData {
-  path?: string;
   baseUrl?: string;
 }