├── src ├── img │ ├── panel.png │ ├── sql_queries.png │ ├── panelDropdown.png │ ├── panel_options.png │ ├── panelHorizontal.png │ ├── displayStyleButton.png │ ├── displayStyleDropdown.png │ └── logo.svg ├── css │ └── TimepickerButton.css ├── types.ts ├── plugin.json ├── TimepickerSelect.tsx ├── TimepickerButton.tsx ├── utils.ts ├── module.ts └── Panel.tsx ├── .prettierrc.js ├── CHANGELOG.md ├── .codeclimate.yml ├── tsconfig.json ├── .editorconfig ├── jest.config.js ├── .gitignore ├── appveyor.yml ├── package.json ├── .github └── workflows │ ├── ci.yml │ └── main.yml ├── README-grafana.md ├── README.md └── LICENSE /src/img/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/panel.png -------------------------------------------------------------------------------- /src/img/sql_queries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/sql_queries.png -------------------------------------------------------------------------------- /src/img/panelDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/panelDropdown.png -------------------------------------------------------------------------------- /src/img/panel_options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/panel_options.png -------------------------------------------------------------------------------- /src/img/panelHorizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/panelHorizontal.png -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require("./node_modules/@grafana/toolkit/src/config/prettier.plugin.config.json"), 3 | }; 4 | -------------------------------------------------------------------------------- /src/img/displayStyleButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/displayStyleButton.png -------------------------------------------------------------------------------- /src/img/displayStyleDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamVenner/grafana-timepicker-buttons/HEAD/src/img/displayStyleDropdown.png -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | ## v1.0.0 6 | 7 | Initial Release 8 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | exclude_patterns: 2 | - "dist" 3 | - "**/node_modules/" 4 | - "**/*.d.ts" 5 | - "src/libs/" 6 | - "src/images/" 7 | - "src/img/" 8 | - "src/screenshots/" 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json", 3 | "include": ["src", "types"], 4 | "compilerOptions": { 5 | "rootDir": "./src", 6 | "baseUrl": "./src", 7 | "typeRoots": ["./node_modules/@types"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | max_line_length = 120 11 | 12 | [*.{js,ts,tsx,scss}] 13 | quote_type = single 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /src/css/TimepickerButton.css: -------------------------------------------------------------------------------- 1 | .timepicker-btn { 2 | display: block; 3 | width: 100%; 4 | height: auto; 5 | padding-top: 5.5px; 6 | padding-bottom: 5.5px; 7 | } 8 | .timepicker-btn:not(:last-child) { 9 | margin-bottom: 10px; 10 | } 11 | .timepicker-btn > .error { 12 | font-weight: bold; 13 | } 14 | .timepicker-btn > .error:not(:last-child) { 15 | margin-bottom: .25rem; 16 | } -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | // This file is needed because it is used by vscode and other tools that 2 | // call `jest` directly. However, unless you are doing anything special 3 | // do not edit this file 4 | 5 | const standard = require('@grafana/toolkit/src/config/jest.plugin.config'); 6 | 7 | // This process will use the same config that `yarn test` is using 8 | module.exports = standard.jestConfig(); 9 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type TimepickerData = { 2 | text: string; 3 | time_from: number; 4 | time_to?: number; 5 | isPrimary?: boolean; 6 | isCurrentTime: boolean; 7 | errors: string[]; 8 | }; 9 | export interface SimpleOptions { 10 | displayStyle: string; 11 | displayButtonsHorizontal: boolean; 12 | timeFromOption: string; 13 | timeToOption?: string; 14 | buttonTextOption?: string; 15 | primaryFieldOption?: string; 16 | primaryFieldValueOption?: string; 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | node_modules/ 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # Compiled binary addons (https://nodejs.org/api/addons.html) 23 | artifacts/ 24 | work/ 25 | ci/ 26 | e2e-results/ 27 | 28 | # Editors 29 | .idea 30 | 31 | /grafana-timepicker-buttons.iml 32 | dist/ 33 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | # Test against the latest version of this Node.js version 2 | environment: 3 | nodejs_version: "12" 4 | 5 | # Local NPM Modules 6 | cache: 7 | - node_modules 8 | 9 | # Install scripts. (runs after repo cloning) 10 | install: 11 | # Get the latest stable version of Node.js or io.js 12 | - ps: Install-Product node $env:nodejs_version 13 | # install modules 14 | - npm install -g yarn --quiet 15 | - yarn install --pure-lockfile 16 | 17 | # Post-install test scripts. 18 | test_script: 19 | # Output useful info for debugging. 20 | - node --version 21 | - npm --version 22 | 23 | # Run the build 24 | build_script: 25 | - yarn dev # This will also run prettier! 26 | - yarn build # make sure both scripts work 27 | -------------------------------------------------------------------------------- /src/plugin.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "panel", 3 | "name": "Timepicker Buttons Panel", 4 | "id": "williamvenner-timepickerbuttons-panel", 5 | 6 | "info": { 7 | "description": "Datasource-configured buttons panel plugin which set the time range of your Grafana dashboard", 8 | "author": { 9 | "name": "William Venner", 10 | "url": "https://github.com/WilliamVenner" 11 | }, 12 | "keywords": ["panel", "timepicker", "time", "picker", "pick", "buttons", "button", "chooser", "period", "calendar", "date", "time"], 13 | "logos": { 14 | "small": "img/logo.svg", 15 | "large": "img/logo.svg" 16 | }, 17 | "screenshots": [ 18 | {"name": "Panel", "path": "img/panel.png"}, 19 | {"name": "SQL Queries", "path": "img/sql_queries.png"} 20 | ], 21 | "links": [ 22 | {"name": "Website", "url": "https://github.com/WilliamVenner/grafana-timepicker-buttons"}, 23 | {"name": "License", "url": "https://github.com/WilliamVenner/grafana-timepicker-buttons/blob/master/LICENSE"} 24 | ], 25 | "version": "%VERSION%", 26 | "updated": "%TODAY%" 27 | }, 28 | 29 | "dependencies": { 30 | "grafanaDependency": ">=7.0.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/TimepickerSelect.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import './css/TimepickerButton.css'; 4 | import { TimepickerData } from './types'; 5 | import { changeTimeRange, getPrettyDate } from './utils'; 6 | import { Select } from '@grafana/ui'; 7 | import { SelectableValue } from '@grafana/data'; 8 | 9 | interface TimepickerSelectProps { 10 | timepickerData: TimepickerData[]; 11 | } 12 | 13 | export class TimepickerSelect extends Component { 14 | handleChange = (selectedOption: SelectableValue) => { 15 | const selected: TimepickerData = this.props.timepickerData[selectedOption.value]; 16 | changeTimeRange(selected.time_from, selected.time_to); 17 | }; 18 | 19 | render() { 20 | return ( 21 |