Related
I am using react-plotly.js Bar-Chart for which I want to show a Tooltip when we hover over a particular Y-axis label that will include a delete button with a data summary.
I have used a custom tooltip first to apply on the label of y-axis but I am not able to see any change on it.
I have also tried a normal HTML tooltip but still it was not visible for the react-plotly.js label.
import { HoverCard, Tooltip } from 'office-ui-fabric-react'
import React, { useState } from 'react'
import Plot from '../Plot'
export default function IndividualView() {
const customTag = '<custom-tag>Hello World</custom-tag>'
const trace1 = {
y: ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'],
x: [1.3586, 2.2623000000000002, 4.9821999999999997, 6.5096999999999996,
7.4812000000000003, 7.5133000000000001, 15.2148, 17.520499999999998,
],
name: 'SF Zoo',
type: 'bar',
orientation: 'h',
}
const trace2 = {
y: ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'],
x: [1.5, 2.5, 5, 6, 7, 8, 15.5, 18],
name: 'LA Zoo',
type: 'bar',
orientation: 'h',
}
const style = {
width: 950,
height: 500,
// border: '1px solid black',
margin_left: 10,
}
const data = [trace1, trace2]
const layout = {
yaxis: {
categories: ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'],
tickInterval: 1,
labels: {
enabled: true,
formatter() {
return `<span title="My custom title">${this.value}</span>`
},
useHTML: true,
style: {
color: 'white',
},
},
},
annotations: [
{
xref: 'paper',
yref: 'paper',
x: -2,
y: -0.109,
showarrow: false,
font: {
family: 'Arial',
size: 1,
color: 'black',
},
},
],
dangerouslySetInnerHTML: { __html: customTag },
}
for (let i = 0; i < data[0].y.length; i++) {
const result = {
xref: 'x',
yref: 'y',
x: 30,
y: data[0].x[i],
text: `${data[0].x[i]}%`,
font: {
family: 'Arial',
size: 12,
color: 'green',
},
showarrow: false,
}
layout.annotations.push(result)
}
const [plotData1] = useState({ data, layout, style })
return (
<Plot {...plotData1} />
)
}
I'm new to React and trying to learn. My personal project is homebrewing display site.
I want to show some of the details in radial bar. I followed tutorial and made array data file, and index file where details show. Now I'm stuck getting single values to display in radial bar.
Also values need to be calculated from percent to numeric. I got that working. I tried some push functions but did not get it to work way I wanted. My coding skills are beginner level.
display example
data.js
import product1 from '../../images/product-1.png';
import product2 from '../../images/product-1.png';
export const productData = [
{
id: 1,
img: product1,
alt: 'Beer',
name: 'Lager',
desc: 'Saaz',
ibu: '35',
ebc: '40',
abv: '8.5',
},
{
id: 2,
img: product2,
alt: 'Beer',
name: 'IPA',
desc: 'Mango, Citrus',
ibu: '85',
ebc: '25',
abv: '5.5',
},
];
index.js
import React, { Component } from 'react';
import Chart from 'react-apexcharts';
import {
ProductsContainer,
ProductWrapper,
ProductsHeading,
ProductTitle,
ProductCard,
ProductImg,
ProductInfo,
ProductDesc,
ProductIbu,
ProductEbc,
ProductAbv,
} from './ProductsElements';
const max = 119;
function valueToPercent(value) {
return (value * 100) / max;
}
class IBU extends Component {
constructor(props) {
super(props);
this.state = {
series: [valueToPercent(15)],
options: {
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
hollow: {
margin: 10,
size: '70%',
background: '#222222',
image: undefined,
imageOffsetX: 0,
imageOffsetY: 0,
position: 'front',
dropShadow: {
enabled: true,
top: 5,
left: 0,
blur: 4,
opacity: 0.9,
},
},
track: {
background: '#d42d2d',
strokeWidth: '67%',
margin: 0, // margin is in pixels
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 4,
color: '#000',
opacity: 0.6,
},
},
dataLabels: {
show: true,
name: {
offsetY: -10,
show: true,
color: '#fff',
fontSize: '17px',
},
value: {
formatter: function (value) {
return (parseFloat(value) * max) / 100;
},
color: '#dadada',
fontSize: '36px',
show: true,
},
},
},
},
fill: {
colors: [
function ({ value, seriesIndex, w }) {
if (value < 55) {
return '#7E36AF';
} else if (value >= 55 && value < 80) {
return '#164666';
} else {
return '#D9534F';
}
},
],
},
stroke: {
lineCap: 'round',
},
labels: ['IBU'],
},
};
}
render() {
return <Chart options={this.state.options} series={this.state.series} type="radialBar" height={250} />;
}
}
const Products = ({ data }) => {
return (
<ProductsContainer>
<ProductsHeading>heading</ProductsHeading>
<ProductWrapper>
{data.map((product, index) => {
return (
<ProductCard key={index}>
<ProductImg src={product.img} alt={product.alt} />
<ProductInfo>
<ProductTitle>{product.name}</ProductTitle>
<ProductDesc>{product.desc}</ProductDesc>
<ProductIbu>{product.ibu}</ProductIbu>
<IBU></IBU>
<ProductEbc>{product.ebc}</ProductEbc>
<ProductAbv>{product.abv}</ProductAbv>
</ProductInfo>
</ProductCard>
);
})}
</ProductWrapper>
</ProductsContainer>
);
};
export default Products;
I'm using echarts-for-react to create a gauge. I'm trying to disable the hover effect on the pointer.
The current behaviour is that I have a circle with a small pointer, and when hovering, the pointer covers the text. I've tried setting emphasis: null but it didn't change anything.
Here's the pictures demonstrating this issue:
Normal Behaviour
When hovering
Here's my code:
const series = {
type: 'gauge',
radius: '100%',
startAngle: '-20',
endAngle: '200',
clockWise: false,
data: [ltv],
max: 150,
axisLine: {
show: true,
lineStyle: {
width: '12',
color: [[0.2, '#e2da34'], [0.4, '#c2e234'], [0.6, '#7dea52'], [0.8, '#c2e234'], [1, '#e2da34']],
shadowColor: '#f5f5f5',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
length: '100%',
width: '4'
},
itemStyle: {
color: '#d1d1d1',
borderWidth: 5,
borderColor: '#d1d1d1'
},
detail: {
show: true,
formatter: e => [`{val|${e.toFixed(1)}%}`, '{text|Good!}'].join('\n'),
rich: {
val: {
color: '#2f353a',
fontWeight: 'bold',
fontFamily: 'SegoePro-Bold',
fontSize: '24'
},
text: {
color: '#9c9c9c',
fontFamily: 'SegoePro-Regular',
fontSize: '12'
}
},
offsetCenter: [0, 0],
padding: [40, 10, 0, 10],
width: 85,
height: 65,
backgroundColor: '#ffffff',
borderWidth: 1,
borderRadius: 50,
borderShadow: '#000000'
}
};
const config = {
title: {
show: false
},
legend: {
show: false
},
tooltip: {
show: false
},
series
};
I am trying to display multiple paths in my OSM maps using angular leaflet. Paths types like multiple circle and polygons.
For circle, the below code:
angular.forEach($scope.alertcircles, function(obj, key){
var arraylen = obj.g_pos_circle.coordinates[0].length;
console.log(obj.id);
$scope.paths['circle' + obj.id] = {
circle: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 8,
radius: 6,
latlngs: [],
type: 'circle',
clickable: true,
heading: 240
}
};
for(i=0; i<obj.g_pos_circle.coordinates[0].length;i++){
var coord = obj.g_pos_circle.coordinates[0][i];
angular.extend($scope.paths ['circle' + obj.id] .circle.latlngs.push({
lat: parseFloat(coord[1]),
lng: parseFloat(coord[0])
}))
}
$scope.paths['circle' + obj.id].circle.radius = obj.g_pos_radius
});
For polygon
angular.forEach($scope.alertareas, function(obj, key){
var arraylen = obj.g_pos_poly.coordinates[0].length;
console.log(obj.id);
$scope.paths['area' + obj.id] = {
area: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 0,
latlngs: [],
type: 'polygon',
clickable: true,
heading: 240
}
};
for(i=0; i<obj.g_pos_poly.coordinates[0].length-1; i++){
var coord = obj.g_pos_poly.coordinates[0][i];
angular.extend($scope.paths ['area' + obj.id ] .area.latlngs.push({
lat: parseFloat(coord[1]),
lng: parseFloat(coord[0])
}))
}
});
I am not able to see any shapes in my map. I previously had a setup like below but the problem is all the shapes are connected as there no differentiation among different shapes
$scope.paths = {
area: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 0,
latlngs: [],
type: 'polygon',
clickable: true,
heading: 240
},
circle: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 8,
radius: 6,
latlngs: [],
type: 'circle',
clickable: true,
heading: 240
}
};
What approach do I have to follow to show individual shapes correctly. Any help is greatly appreciated.
I had the same problem, and the reason was in included css with style
svg{
width: 100%;
height: 100%;
}
Correction
.angular-leaflet-map svg{
width: initial;
height: initial;
}
resolve the problem
I have extended a component and I can't get it to render to a panel. Seems like I am missing something pretty basic since the debugger in Chrome actually shows that the panel has the data, it just isn't showing up.
Here is the fiddle and here are parts of the code:
Custom Component:
Ext.define('StoplightControl', {
extend: 'Ext.draw.Component',
alias: 'widget.Stoplight',
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent: function () {
var kpiData; // = Ext.data.StoreManager.get('KPIStore').getById(this.model.get('KPI_ID'));
if (typeof (kpiData) === 'undefined' || kpiData == null) {
kpiData = Ext.create('KPIModel', {
ControlBackground: '#000000',
Caution_label: 'On',
Good_label: 'Ahead',
Poor_label: 'Behind',
Good_color: '#00FF00',
Poor_color: '#ff0000',
Caution_color: '#550000',
Header: 'Test'
});
}
this.setGradients(kpiData.get('ControlBackground'));
this.drawItems(this.model, kpiData);
},
setGradients: function (controlColor) {
this.gradients = [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: controlColor,
opacity: 1
},
50: {
color: controlColor,
opacity: .6
},
100: {
color: controlColor,
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}]
},
drawItems: function (model, kpiData) {
var cautionValueX = -22.5 * (model.get('cautionValue').toString().length) + 227.5,
goodValueX = -22.5 * (model.get('goodValue').toString().length) + 227.5,
poorValueX = -22.5 * (model.get('poorValue').toString().length) + 227.5,
maxLineLength = 15,
changeOfY = -50,
cautionLabel = linebreaks(kpiData.get('Caution_label'), maxLineLength),
goodLabel = linebreaks(kpiData.get('Good_label'), maxLineLength),
poorLabel = linebreaks(kpiData.get('Poor_label'), maxLineLength),
cautionChangeY = (cautionLabel.split("\n").length - 1) * changeOfY,
goodChangeY = (goodLabel.split("\n").length - 1) * changeOfY,
poorChangeY = (poorLabel.split("\n").length - 1) * changeOfY,
headerFontSize = '100px arial,sans-serif',
textFontSize = '80px arial,sans-serif';
var drawItems = [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x: 224,
y: 896,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Good_color')
}, {
type: "circle",
x: 224,
y: 214,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Poor_color')
}, {
type: "circle",
x: 224,
y: 555,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Caution_color')
}, {
type: "text",
id: "svg-stoplight-poorValue",
text: model.get('poorValue'),
x: poorValueX,
y: 220,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionValue",
text: model.get('cautionValue'),
x: cautionValueX,
y: 560,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodValue",
text: model.get('goodValue'),
x: goodValueX,
y: 900,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-poorLabel",
text: poorLabel,
x: 500,
y: 220 + poorChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionLabel",
text: cautionLabel,
x: 500,
y: 560 + cautionChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodLabel",
text: goodLabel,
x: 500,
y: 900 + goodChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-headerLabel",
text: kpiData.get('Header'),
x: 145,
y: -40,
fill: "Black",
font: headerFontSize
}, {
type: "text",
id: "svg-stoplight-totalLabel",
text: "Total = " + model.get('total'),
x: 100,
y: 1250,
fill: "Black",
font: textFontSize
}];
//don't add gradients if IE is > 10 or documentMode is less than 9
if (!(ie > 10 || document.documentMode < 9)) {
drawItems.push({
type: "ellipse",
id: 'test1',
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
});
}
},
width: 210,
height: 250
});
Creation of the Panel and adding the component:
var displayPanel = Ext.create('widget.panel', {
width: 600,
height: 800,
title: 'Cost & Schedule Variance',
renderTo: 'WorkstreamStoplights',
pack: 'center',
shrinkWrap: 3,
layout: {
type: 'table',
column: 2
},
});
stoplightStore.each(function (model, idx) {
var stoplight = Ext.create('StoplightControl', {
model: model
});
displayPanel.add(stoplight);
});
displayPanel.doLayout();
As you'll be able to see from the fiddle, the Title displays properly and I have even added an item to the displayPanel on creation, but doing a .add() doesn't seem to have any effect even with the .doLayout()
Haven't dabbled in ExtJS for a long time, but the 4.2 doc states, for this method:
This method needs to be called whenever you change something on this
component that requires the Component's layout to be recalculated.
Ah, silly me. I needed to add items to my component. I needed to make the assignment in the initComponents of
this.items = drawItems;
Working fiddle