Group Details Private

administrators

  • gon

    Short Forecast on Keppel DC Reit

    posted in Investments read more
  • gon

    Graph Component

    Finally we pass the series object to Graph component.

    return (
      <div>
         <Graph
            height={props.height}
            width={props.width}
            series={series}
            timeRange={props.timeRange}
            showLines={true}
          />
      </div>
    );
    

    Here is everything in a single gist.

    import React from 'react';
    import { PanelProps, GraphSeriesXY, GraphSeriesValue } from '@grafana/data';
    import { Graph } from '@grafana/ui';
    
    export interface GraphPanelOptions {}
    
    export const GraphPanel: React.FC<PanelProps<GraphPanelOptions>> = props => {
      let ser_ind: number = 0;
      const series: GraphSeriesXY[] = props.data.series.map(item => {
        const timeVals: Array<GraphSeriesValue> = item.fields[0].values.toArray();
        const yVals: Array<GraphSeriesValue> = item.fields[1].values.toArray();
    
        const data: GraphSeriesValue[][] = [];
        for (let i = 0; i < timeVals.length; i++) {
          data.push([timeVals[i], yVals[i]]);
        }
    
        const unixTimeRange = props.timeRange.to.unix() - props.timeRange.from.unix();
        const ser: GraphSeriesXY = {
          seriesIndex: ser_ind++,
          yAxis: { index: 0 },
          isVisible: true,
          timeField: props.data.series[0].fields[0],
          valueField: props.data.series[0].fields[1],
          timeStep: props.width / unixTimeRange,
          data: data,
          label: 'some label',
        };
        return ser;
      });
    
      return (
        <div>
          <Graph 
            height={props.height} 
            width={props.width} 
            series={series} 
            timeRange={props.timeRange} 
            showLines={true} 
          />
        </div>
      );
    };
    

    posted in Technology read more
  • gon

    Making a Graph Panel

    Here is the definition of type of props defined in @grafana-ui for Graph component.

    export interface GraphProps {
      ariaLabel?: string;
      children?: JSX.Element | JSX.Element[];
      series: GraphSeriesXY[];
      timeRange: TimeRange; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs
      timeZone?: TimeZone; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs
      showLines?: boolean;
      showPoints?: boolean;
      showBars?: boolean;
      width: number;
      height: number;
      isStacked?: boolean;
      lineWidth?: number;
      onHorizontalRegionSelected?: (from: number, to: number) => void;
    }
    

    series prop holds the data you want to render in your graph. Each line that you see on a normal Grafana chart is of type GraphSeriesXY. Each panel can render multiple lines for different metrics/variables and therefore series is an array of GraphSeriesXY. We can construct series prop from props.data.

    All time-series data in Grafana is stored and used as an object of type DataFrame. It is kind of like data frames in data science if you are familiar with them (like pandas dataframes). props.data.series is of type DataFrame[], ie. you have a collection of time-series data stored as an array. Each item in this array corresponds to a single element in your GraphSeriesXY[] array. We have to therefore map object of type DataFrame to object of type GraphSeriesXY.

    let ser_ind:number = 0;
    const series:GraphSeriesXY[] = props.data.series.map(item => {
            const timeVals:Array<GraphSeriesValue> = item
                                                    .fields[0]
                                                    .values
                                                    .toArray();
            const yVals:Array<GraphSeriesValue> =   item
                                                    .fields[1]
                                                    .values
                                                    .toArray();
    
            const data:GraphSeriesValue[][] = [];
            for (let i = 0; i < timeVals.length; i++) {
                data.push([timeVals[i], yVals[i]]);
            }
            
            const unixTimeRange = (props.timeRange.to.unix() - props.timeRange.from.unix());
            const ser:GraphSeriesXY = {
                seriesIndex: ser_ind++,
                yAxis: {index:0},
                isVisible: true,
                timeField: props.data.series[0].fields[0],
                valueField: props.data.series[0].fields[1],
                timeStep: props.width / unixTimeRange,
                data: data,
            };
            return ser;
        });
    

    Each item is of type DataFrame. The time-series data is stored in the fields array of item. Each field inside the fields array consists of data points for a single axis similar to column-oriented dbms.

    We have two axis in our graphs, time (fields[0], x axis) and values (fields[1], y axis). We construct data of type GraphSeriesValue[][]. We create ser using data, fields and timeRange in unix values. From this transformation we get a series array which can be passed to Graph component. Make sure to give a distinct index to each item in series (ser_ind here). You can take a look at type GraphSeriesXY if you want to play around with other props like color, etc.

    posted in Technology read more
  • gon

    Reference: https://medium.com/@hariom.2711/grafana-react-panel-plugins-545cb9afa42d

    Plugin Basics

    Your main panel should have props of type PanelProps<options>. You have to specify the type for options. options are basically used to enable the user to provide custom settings for your panel.

    import React from 'react';
    import { PanelProps } from '@grafana/data';
    
    export interface GraphPanelOptions {
    
    };
    
    export const GraphPanel:React.FC<PanelProps<GraphPanelOptions>>
      = props => {
      return (
        <div></div>
      );
    }
    

    props will contain many attributes. Relevant ones for our GraphPanel are data, width, height, timeRange.

    data attribute contains the whole of your time-series data. Each time-series contains two fields, the first one being your time points and the other one being the function you plot on y-axis. There will be multiple time-series which will come as different lines plotted on the same graph in your data attribute depending on your backend.

    width, and height contain the actual width and height of the space allocated to your panel when it is rendered on Grafana.

    timeRange is the time range selected by the user.

    posted in Technology read more
  • gon

    Reference: https://corpglory.com/s/grafana-react-plugins/

    PanelOptions

    PanelOptions is passed as a PanelProps generic argument. Grafana will pass options from editor to your panel component as props.

    export interface MyPanelOptions {
      someText: string;
    }
    
    export class MyPanel extends PureComponent<PanelProps<MyPanelOptions>> {
      render() {
        const { options } = this.props;
    
        return (
          <div>
            Text from editor: { options.someText }
          </div>
        );
      }
    }
    

    PanelEditor

    PanelEditor is the separate component which represents "Visualization" tab and is used for configuring a panel plugin.

    export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
      labelWidth = 6;
    
      render() {
        const { options, onChange } = this.props;
    
        return (
          <PanelOptionsGrid>
            <PanelOptionsGroup title="Some options">
              <Input
                className="gf-form-input width-5"
                type="text"
                value={options.someText}
                placeholder="Enter some text"
                onChange={event => {
                  onChange({
                    ...options
                  });
                }}
              />
            </PanelOptionsGroup>
          </PanelOptionsGrid>
        );
      }
    }
    

    posted in Technology read more
  • admin

    User Data Deletion

    Please email your request to admin@stocklah.com for the deletion of user data.

    posted in Announcements read more
  • admin

    Terms


    By accessing this Website, accessible from https://www.investzinc.com, you are agreeing to be bound by these Website Terms and Conditions of Use and agree that you are responsible for the agreement with any applicable local laws. If you disagree with any of these terms, you are prohibited from accessing this site. The materials contained in this Website are protected by copyright and trade mark law.

    Use License


    Permission is granted to temporarily download one copy of the materials on Investzinc's Website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:

    • modify or copy the materials;
    • use the materials for any commercial purpose or for any public display;
    • attempt to reverse engineer any software contained on Investzinc's Website;
    • remove any copyright or other proprietary notations from the materials; or
    • transferring the materials to another person or "mirror" the materials on any other server.

    This will let Investzinc to terminate upon violations of any of these restrictions. Upon termination, your viewing right will also be terminated and you should destroy any downloaded materials in your possession whether it is printed or electronic format. These Terms of Service has been created with the help of the Terms Of Service Generator.

    Disclaimer


    All the materials on Investzinc’s Website are provided "as is". Investzinc makes no warranties, may it be expressed or implied, therefore negates all other warranties. Furthermore, Investzinc does not make any representations concerning the accuracy or reliability of the use of the materials on its Website or otherwise relating to such materials or any sites linked to this Website.

    Limitations


    Investzinc or its suppliers will not be hold accountable for any damages that will arise with the use or inability to use the materials on Investzinc’s Website, even if Investzinc or an authorize representative of this Website has been notified, orally or written, of the possibility of such damage. Some jurisdiction does not allow limitations on implied warranties or limitations of liability for incidental damages, these limitations may not apply to you.

    Revisions and Errata


    The materials appearing on Investzinc’s Website may include technical, typographical, or photographic errors. Investzinc will not promise that any of the materials in this Website are accurate, complete, or current. Investzinc may change the materials contained on its Website at any time without notice. Investzinc does not make any commitment to update the materials.

    Links


    Investzinc has not reviewed all of the sites linked to its Website and is not responsible for the contents of any such linked site. The presence of any link does not imply endorsement by Investzinc of the site. The use of any linked website is at the user’s own risk.

    Site Terms of Use Modifications


    Investzinc may revise these Terms of Use for its Website at any time without prior notice. By using this Website, you are agreeing to be bound by the current version of these Terms and Conditions of Use.

    Your Privacy


    Please read our Privacy Policy at https://www.investzinc.com/topic/164/investzinc-s-privacy-policy

    Governing Law


    Any claim related to Investzinc's Website shall be governed by the laws of sg without regards to its conflict of law provisions.

    posted in Announcements read more

Looks like your connection to administrators group was lost, please wait while we try to reconnect.