Oil & Gas Explorer React Dashboard
This is an example of the kind of complex, multi-chart dashboards used in the oil and gas industry.
index.tsx
3d.ts
chartUtils.ts
DensityChart.ts
eighth.ts
fifth.ts
first.ts
fourth.ts
ninth.ts
OIlGasStyles.css
PoreSpaceChart.ts
RangeFillPaletteProvider.ts
ResistivityChart.ts
second.ts
seventh.ts
ShaleChart.ts
sixth.ts
SonicChart.ts
TextureChart.ts
theme.ts
third.ts
vChartUtils.ts
Copy to clipboard
Minimise
Fullscreen
1import { ThemeProvider } from "scichart/Charting/Themes/IThemeProvider";
2import { SciChartJSDarkv2Theme } from "scichart/Charting/Themes/SciChartJSDarkv2Theme";
3import { SciChartJSLightTheme } from "scichart/Charting/Themes/SciChartJSLightTheme";
4import { SciChartJsNavyTheme } from "scichart/Charting/Themes/SciChartJsNavyTheme";
5
6const getCssColor = (cssVar: string, fallback: string): string => {
7 if (typeof document === "undefined") {
8 return fallback;
9 }
10
11 const cssValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
12 return cssValue || fallback;
13};
14
15export interface AppThemeBase {
16 SciChartJsTheme: ThemeProvider;
17
18 // General colours
19 LegendTextColor: string;
20 SidebarBackground: string;
21 SidebarTextColor: string;
22
23 // Charts grid colours
24 ChartsGridStroke1: string;
25 ChartsGridStroke2: string;
26 ChartsGridStroke3: string;
27
28 // 3D Chart colors
29 Chart3DScatterFill: string;
30 Chart3DColor1: string;
31 Chart3DColor2: string;
32 Chart3DColor3: string;
33 Chart3DColor4: string;
34 Chart3DColor5: string;
35 Chart3DColor6: string;
36 Chart3DColor7: string;
37
38 // Shale chart
39 ShaleBackgroundColor: string;
40 ShaleOilLegendColor: string;
41 ShaleWaterLegendColor: string;
42 ShaleWaterSeries: string;
43 ShaleSeriesStroke: string;
44
45 // Density chart
46 DensityLegendSeparator: string;
47 DensityBackgroundOne: string;
48 DensityBackgroundTwo: string;
49 DensityStrokeY: string;
50 DensityStrokeY1: string;
51 DensityFillY: string;
52 DensityFillY1: string;
53
54 // Resistivity Chart
55 ResistivityLineStroke: string;
56 ResistivityLineStroke2: string;
57
58 // Pore Space Chart
59 PoreSpaceStroke1: string;
60 PoreSpaceStroke2: string;
61 PoreSpacePhieFill: string;
62 PoreSpacePhitFill: string;
63 PoreSpaceScatterStroke: string;
64 PoreSpaceScatterFill: string;
65
66 // Sonic vertical
67 SonicGradient1: string;
68 SonicGradient2: string;
69 SonicGradient3: string;
70 SonicGradient4: string;
71 SonicGradient5: string;
72 SonicGradient6: string;
73
74 // Texture chart
75 TextureFill: string;
76 TextureLine: string;
77 TextureSandFill: string;
78 TextureGrainFill: string;
79 TextureGravelFill: string;
80 RolloverLineColor: string;
81 RolloverTooltipFill: string;
82 RolloverTooltipText: string;
83}
84
85// @ts-ignore
86export class App2022BrandTheme implements AppThemeBase {
87 SciChartJsTheme = new SciChartJsNavyTheme();
88
89 // general colours
90 get LegendTextColor() {
91 return getCssColor("--text", "LightGray");
92 }
93 get SidebarBackground() {
94 return getCssColor("--bg-darker", this.SciChartJsTheme.sciChartBackground);
95 }
96 get SidebarTextColor() {
97 return getCssColor("--text", "#FFF");
98 }
99
100 // Charts grid colours
101 ChartsGridStroke1 = "#AE408E";
102 ChartsGridStroke2 = "#EA6F63";
103 ChartsGridStroke3 = "#45BEE8";
104
105 // 3D Chart colors
106 Chart3DScatterFill = "#F1CFB5";
107 Chart3DColor1 = "#28266D";
108 Chart3DColor2 = "#E7C565";
109 Chart3DColor3 = "#83D2F5";
110 Chart3DColor4 = "#209FD9";
111 Chart3DColor5 = "#BE7336";
112 Chart3DColor6 = "#AE408E";
113 Chart3DColor7 = "#634E97";
114
115 // Shale chart
116 ShaleBackgroundColor = "#67BDAFAA";
117 ShaleOilLegendColor = "#AE408E";
118 ShaleWaterLegendColor = "#209FD9";
119 ShaleWaterSeries = "#209FD9";
120 ShaleSeriesStroke = "#E4F5FC";
121
122 // Density chart
123 DensityLegendSeparator = "#264B93";
124 DensityBackgroundOne = "#537ABD";
125 DensityBackgroundTwo = "#67BDAF";
126 DensityStrokeY = "#45BEE8";
127 DensityStrokeY1 = "#AE408E";
128 DensityFillY = "#45BEE877";
129 DensityFillY1 = "#67BDAF";
130
131 // Resistivity Chart
132 ResistivityLineStroke = "#45BEE8";
133 ResistivityLineStroke2 = "#67BDAF";
134
135 // Pore Space Chart
136 PoreSpaceStroke1 = "#E4F5FC";
137 PoreSpaceStroke2 = "#F1CFB5";
138 PoreSpacePhieFill = "#67BDAF";
139 PoreSpacePhitFill = "#F48420";
140 PoreSpaceScatterStroke = "#FFF";
141 PoreSpaceScatterFill = "#83D2F5";
142
143 // Sonic vertical
144 SonicGradient1 = "#634E97";
145 SonicGradient2 = "#264B93";
146 SonicGradient3 = "#AE408E";
147 SonicGradient4 = "#45BEE8";
148 SonicGradient5 = "#E4F5FC";
149 SonicGradient6 = "#DF69A8";
150
151 // Texture chart
152 TextureFill = "#90808080";
153 TextureLine = "#808080";
154 TextureSandFill = "#E7C565";
155 TextureGrainFill = "#209FD9";
156 TextureGravelFill = "#BE7336";
157
158 // Cursors
159 RolloverLineColor = "#DF69A8";
160 RolloverTooltipFill = "#AE408E";
161 RolloverTooltipText = "#FFF";
162}
163
164// tslint:disable-next-line:max-classes-per-file
165export class AppDarkTheme implements AppThemeBase {
166 SciChartJsTheme = new SciChartJSDarkv2Theme();
167
168 // general colours
169 get LegendTextColor() {
170 return getCssColor("--text", "LightGray");
171 }
172 get SidebarBackground() {
173 return getCssColor("--bg-darker", this.SciChartJsTheme.sciChartBackground);
174 }
175 get SidebarTextColor() {
176 return getCssColor("--text", "#FFF");
177 }
178
179 // Charts grid colours
180 ChartsGridStroke1 = "#d52aa7";
181 ChartsGridStroke2 = "#2bd452";
182 ChartsGridStroke3 = "#916eeb";
183
184 // 3D Chart colors
185 Chart3DScatterFill = "#a88d32";
186 Chart3DColor1 = "#0a0aae";
187 Chart3DColor2 = "#2964ba";
188 Chart3DColor3 = "#36e15a";
189 Chart3DColor4 = "#f7e24d";
190 Chart3DColor5 = "#b8e946";
191 Chart3DColor6 = "#dd8037";
192 Chart3DColor7 = "#a81d09";
193
194 // Shale chart
195 ShaleBackgroundColor = "#90EE90";
196 ShaleOilLegendColor = "#b22222";
197 ShaleWaterLegendColor = "#3333FF";
198 ShaleWaterSeries = "#E4E840";
199 ShaleSeriesStroke = "#474747";
200
201 // Density chart
202 DensityLegendSeparator = "#FF3333";
203 DensityBackgroundOne = "#228B22";
204 DensityBackgroundTwo = "#FFA500";
205 DensityStrokeY = "#1C1C1E";
206 DensityStrokeY1 = "#FF3333";
207 DensityFillY = "#228B22";
208 DensityFillY1 = "#FFA500";
209
210 // Resistivity Chart
211 ResistivityLineStroke = "#00BFFF";
212 ResistivityLineStroke2 = "#FF4500";
213
214 // Pore Space Chart
215 PoreSpaceStroke1 = "#4682B4";
216 PoreSpaceStroke2 = "#757000";
217 PoreSpacePhieFill = "#4682B490";
218 PoreSpacePhitFill = "#75700090";
219 PoreSpaceScatterStroke = "#FFF";
220 PoreSpaceScatterFill = "#005A9C";
221
222 // Sonic vertical
223 SonicGradient1 = "#00008B";
224 SonicGradient2 = "#3333FF";
225 SonicGradient3 = "#228B22";
226 SonicGradient4 = "#DFFF00";
227 SonicGradient5 = "#FFFF00";
228 SonicGradient6 = "#FF3333";
229
230 // Texture chart
231 TextureFill = "#90808080";
232 TextureLine = "#808080";
233 TextureSandFill = "#DAA520";
234 TextureGrainFill = "#008b8b";
235 TextureGravelFill = "#33FF33";
236
237 // Cursors
238 RolloverLineColor = "#AE408E";
239 RolloverTooltipFill = "#AE408E";
240 RolloverTooltipText = "#FFF";
241}
242
243// tslint:disable-next-line:max-classes-per-file
244export class AppLightTheme implements AppThemeBase {
245 SciChartJsTheme = new SciChartJSLightTheme();
246
247 // general colours
248 get LegendTextColor() {
249 return getCssColor("--text", "#222");
250 }
251 get SidebarBackground() {
252 return getCssColor("--bg-darker", this.SciChartJsTheme.sciChartBackground);
253 }
254 get SidebarTextColor() {
255 return getCssColor("--text", "#222");
256 }
257
258 // Charts grid colours
259 ChartsGridStroke1 = "#DF69A8";
260 ChartsGridStroke2 = "#EA6F63";
261 ChartsGridStroke3 = "#45BEE8";
262
263 // 3D Chart colors
264 Chart3DScatterFill = "#DF69A8";
265 Chart3DColor1 = "#E4F5FC";
266 Chart3DColor2 = "#45BEE8";
267 Chart3DColor3 = "#45BEE8";
268 Chart3DColor4 = "#EA6F63";
269 Chart3DColor5 = "#DF69A8";
270 Chart3DColor6 = "#8065A3";
271 Chart3DColor7 = "#364BA0";
272
273 // Shale chart
274 ShaleBackgroundColor = "#B9E0D4";
275 ShaleOilLegendColor = "#DF69A8";
276 ShaleWaterLegendColor = "#45BEE8";
277 ShaleWaterSeries = "#45BEE877";
278 ShaleSeriesStroke = "#264B93";
279
280 // Density chart
281 DensityLegendSeparator = "#264B93";
282 DensityBackgroundOne = "#AE408E";
283 DensityBackgroundTwo = "#EA6F63AA";
284 DensityStrokeY = "#45BEE8";
285 DensityStrokeY1 = "#AE408E";
286 DensityFillY = "#AE408EAA";
287 DensityFillY1 = "#EA6F63AA";
288
289 // Resistivity Chart
290 ResistivityLineStroke = "#45BEE8";
291 ResistivityLineStroke2 = "#AE408E";
292
293 // Pore Space Chart
294 PoreSpaceStroke1 = "#E4F5FC";
295 PoreSpaceStroke2 = "#F1CFB5";
296 PoreSpacePhieFill = "#45BEE8";
297 PoreSpacePhitFill = "#AE408E";
298 PoreSpaceScatterStroke = "#EA6F63";
299 PoreSpaceScatterFill = "#EA6F63";
300
301 // Sonic vertical
302 SonicGradient1 = "#634E9733";
303 SonicGradient2 = "#264B9355";
304 SonicGradient3 = "#AE408E77";
305 SonicGradient4 = "#45BEE899";
306 SonicGradient5 = "#E4F5FCAA";
307 SonicGradient6 = "#DF69A8";
308
309 // Texture chart
310 TextureFill = "#90808080";
311 TextureLine = "#808080";
312 TextureSandFill = "#E7C565";
313 TextureGrainFill = "#209FD9";
314 TextureGravelFill = "#BE7336";
315
316 // Cursors
317 RolloverLineColor = "#364BA0";
318 RolloverTooltipFill = "#364BA0";
319 RolloverTooltipText = "#FFF";
320}
321
322export const appTheme: AppThemeBase = new App2022BrandTheme();
323Oil And Gas Explorer React Dashboard
Overview
This example demonstrates a complex multi-chart dashboard tailored for the oil and gas industry using React. The dashboard integrates both 2D and 3D charts to deliver an advanced visualization experience, enabling users to explore various datasets through a responsive and interactive interface.
Technical Implementation
The implementation utilizes React functional components along with the <SciChartReact/> component, part of scichart-react to instantiate individual chart instances. Multiple chart initializers are employed, including several 2D charts and one 3D chart, each configured through dedicated initialization functions. A key feature is the use of the SciChartVerticalGroup to group selected 2D charts for synchronized zooming, panning, and rollover interactions – a technique detailed in the Synchronizing Multiple Charts documentation. React hooks such as useMediaQuery and useTheme from Material-UI are used to detect screen size changes and render a responsive layout, ensuring optimal performance on both desktop and mobile devices.
Features and Capabilities
The dashboard features advanced customization such as detailed theming via custom theme objects defined in a separate module, which provides a consistent look and feel across all charts. Interactive capabilities are enhanced through the integration of modifiers like the RolloverModifier for improved tooltip and crosshair functionality. This combination of multiple advanced charts with synchronized interactions delivers a robust platform for real-time data exploration.
Integration and Best Practices
This example follows best practices for React integration by leveraging components such as <SciChartReact/> for chart instantiation and ChartGroupLoader for managing multiple chart instances efficiently. Responsive design is achieved through the intelligent use of useMediaQuery which conditionally renders sidebars according to screen size. Performance optimization is further enhanced by grouping charts using SciChartVerticalGroup, a practice that aligns with recommendations in multi-chart dashboard implementations found on the SciChart React GitHub repository. Overall, this example showcases how to build a highly interactive, responsive, and themed dashboard using SciChart.js in a React environment.
react Chart Examples & Demos
See Also: Performance Demos & Showcases (12 Demos)
Realtime React Chart Performance Demo
This demo showcases the incredible realtime performance of our React charts by updating the series with millions of data-points!
Load 500 Series x 500 Points Performance Demo
This demo showcases the incredible performance of our React Chart by loading 500 series with 500 points (250k points) instantly!
Load 1 Million Points Performance Demo
This demo showcases the incredible performance of our JavaScript Chart by loading a million points instantly.
Realtime Ghosted Traces
This demo showcases the realtime performance of our React Chart by animating several series with thousands of data-points at 60 FPS
Realtime Audio Spectrum Analyzer Chart Example
See the frequency of recordings with the React audio spectrum analyzer example from SciChart. This real-time audio visualizer demo uses a Fourier Transform.
Client/Server Websocket Data Streaming
This demo showcases the incredible realtime performance of our JavaScript charts by updating the series with millions of data-points!
Server Traffic Dashboard
This dashboard demo showcases the incredible realtime performance of our React charts by updating the series with millions of data-points!
Rich Interactions Showcase
This demo showcases the incredible realtime performance of our React charts by updating the series with millions of data-points!
Dynamic Layout Showcase
Demonstrates a custom modifier which can convert from single chart to grid layout and back.
Dragabble Event Markers
Demonstrates how to repurpose a Candlestick Series into dragabble, labled, event markers
React Population Pyramid
Population Pyramid of Europe and Africa
NEW!
High Performance SVG Cursor & Rollover
Demonstrates how to use the SVG render layer in SciChart.js to maintain smooth cursor interaction on heavy charts with millions of points.
Quick Links
Useful Links
SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.