I'm trying to get the SVG string for each highchart and log it to the console before I starting working on building out my function.
I think the issue I'm having is with the way that I'm calling getSVG(), but I'm not sure.
I've tried a number of things and can't seem to get it to work.
The documentation isn't very clear about it:
https://github.com/kirjs/react-highcharts
Edit: I found a similar issue here, but still can't get it to work:
https://github.com/kirjs/react-highcharts/issues/186
import React, { Component } from 'react';
import RHC from 'react-highcharts';
import Highcharts from 'highcharts';
import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);
const ReactHighcharts = RHC.withHighcharts(Highcharts);
class Chart extends Component {
componentDidMount() {
console.log(this.refs[this.props.name].getSVG());
}
render() {
return (
<ReactHighcharts config={this.props.config} ref={this.props.name}/>
);
}
}
export default Chart;
I'm getting this error:
TypeError: this.refs[this.props.name].getSVG is not a function. (In 'this.refs[this.props.name].getSVG()', 'this.refs[this.props.name].getSVG' is undefined)
Follow the below codes to implement in yours:
const ReactHighcharts = require('react-highcharts');
class MyComponent extends React.Component {
componentDidMount() {
let chart = this.refs.chart.getChart();
let svg = chart.getSVG(); // This is your SVG
}
render() {
return <ReactHighcharts config={config} ref="chart"/>;
}
}
If the above code under componentDidMount() didn't work, then try this code:
componentDidUpdate() {
if (this.refs.chart) {
let chart = this.refs.chart.refs.chart;
let html = document.createElement('html');
html.innerHTML = chart.innerHTML;
let svg = html.getElementsByTagName('svg')[0].outerHTML; // This is your SVG
}
}
import React from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highcharts';
import exporting from 'highcharts/modules/exporting';
exporting(Highcharts)
class Chart extends Component {
componentDidMount() {
console.log(this.refs[chartRef].getSVG());
}
render() {
return (
<HighchartsReact
highcharts={Highcharts}
options={...yourOptions}
ref="chartRef"
/>);
}
}
export default Chart;
Here you can access getSVG. just include exporting(Highcharts)
Related
I am trying to write a grafana react plugin with a canvas inside. I created my template with npx #grafana/toolkit plugin:create my-plugin. I ran this template with yarn install, yarn dev --watch. It works.
To test, I removed options in module.ts file like this
import { PanelPlugin } from '#grafana/data';
import { SimplePanel } from './SimplePanel';
export const plugin = new PanelPlugin(SimplePanel);
I modified SimplePanel.tsx file as follow
import React, { PureComponent } from 'react';
import { PanelProps } from '#grafana/data';
export class SimplePanel extends PureComponent<PanelProps> {
componentDidMount() {
console.log(this.refs.canvas)
const ctx = this.refs.canvas.getContext('2d');
console.log(ctx)
}
render() {
return (
<canvas ref="canvas" width={300} height={300}/>
);
}
}
And I got the following error :
Property 'getContext' does not exist on type 'ReactInstance'.
Property 'getContext' does not exist on type 'Component< any, {}, any>'.
How is it possible to add a canvas in grafana react plugin ?
Thanks for answer.
Thanks to MateuszFalkowski's comment, I manage to add a canvas :
import React, { PureComponent } from 'react';
import { PanelProps } from '#grafana/data';
export class SimplePanel extends PureComponent<PanelProps> {
myCanvasRef = React.createRef<HTMLCanvasElement>()
componentDidMount() {
console.log(this.myCanvasRef)
const ctx = this.myCanvasRef.current!.getContext('2d');
console.log(ctx)
}
render() {
return (
<canvas ref={this.myCanvasRef} width={300} height={300}/>
);
}
}
I trying to test a React component which renders a D3 element in another class, below is the component code.
import React, {Component} from 'react';
import {graphql} from "react-apollo";
import * as compose from 'lodash.flowright';
import MostConvD3bar from './MostConvD3bar'
import MostConvProdQuery from "../../Query/MostConvProdQuery";
import style from "./MostConvProds.css"
class MostConvProds extends Component {
componentDidMount(){
if (!this.props.loading)
new MostConvD3bar(this.refs.mostConChart, this.props.products)
}
componentWillReceiveProps(nextProps){
if (!nextProps.loading)
new MostConvD3bar(this.refs.mostConChart, nextProps.products)
}
render() {
return (
<div className={style.container} ref="mostConChart"> </div>
)
}
}
const mostConvQuery = {
name: "mostConvQuery",
props({ mostConvQuery: { error, loading, mostConverted } }) {
return {
loading,
error,
products: mostConverted
}
}
}
export default compose(
graphql(MostConvProdQuery, mostConvQuery))(MostConvProds);
I have imported lodash.flowright as compose as you can see, but I am getting an error like below.
TypeError: compose is not a function
Any help will be appreciated.
Replace:
import * as compose from 'lodash.flowright';
with:
import { flowRight as compose } from 'lodash';
I keep getting this weird message and React isn´t rendering my component. I am pretty sure I am rendering and importing it correctly:
Container:
import searchBar from "./searchBar";
class ItemList extends Component {
render() {
return (
<searchBar/>
);
}
}
searchBar
import React, { Component } from 'react';
const searchBar = () => {
return <div>ssuhsuhuhsususu</div>;
}
export default searchBar
Change to
const SearchBar = () => {
return <div>ssuhsuhuhsususu</div>;
}
export default SearchBar;
I you give name in small caps it will be considered as HTML tag such as
<p>, <div>
So your component should always be starting with CAPS.
If you want to use component which name start with lowercase then use can use following tips:
Just assign it to capitalised variable before using it.
import searchBar from "./searchBar";
const Foo = searchBar;
<Foo/>
Full Code:
import searchBar from "./searchBar";
const Foo = searchBar;
class ItemList extends Component {
render() {
return (
<Foo/>
);
}
}
import $ from 'jquery';
export class BaseElement {
constructor(){
this.element = null; //jquery Object
}
appendToElement(el) {
this.createElement();
el.append(this.element);
}
createElement(){
let s = getElementString();
this.element = $(s);
}
getElementString(){
throw 'please override getElementString() in BaseElements';
}
}
why do we need to create this base element class for the UI??
You don't need to create any base component for UI. Below is the sample code for creating components.
Class component
import React from 'react';
export class LoginComponent from React.Component {
render() {
return (
//Your UI code comes here
)
}
}
Function Component
import React from 'react';
export default StaticComponent = (props) {
return (
//Your UI code here
)
}
Please refer React Site for more details.
I am attempting to create a Web IDE sort of like Eclipse Orion. The code editor that I plan to use is Code Mirror; the only difficulty is that I cannot get the code editor to load. Here is the error that I am encountering.
Here is the code that got me to this issue.
import React, { Component } from 'react';
import codemirror from 'codemirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/monokai.css';
class Editor extends Component {
componentDidMount = () => {
this.codeMirror = codemirror.fromTextArea(this.codeEditor, {
mode: 'markdown'
});
};
codeEditor = React.createRef();
render = () => (
<div>
<textarea ref={this.codeEditor} />
</div>
);
}
export default Editor;
This issue has been stated many times here, but with no solution that made sense in my situation. Thanks in advance.
This code seemed to do the trick, it was just an issue with the ref.
import React, { Component } from 'react';
import codemirror from 'codemirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';
class Editor extends Component {
componentDidMount = () => {
this.codeMirror = codemirror(this.editor, {
mode: 'markdown'
});
};
ref = React.createRef();
render = () => (
<div>
<div ref={self => this.editor = self} />
</div>
);
}
export default Editor;