I'm using react-heatmap-grid in order to create a table with data and I want that when I click on a rectangle from the table to open a popup. I'm using Semantic UI in my project so I would like to use the Pinned Popup that appears only on click.
The code so far:
const xLabels = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
const yLabels =['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00'];
const data = [[7, 1, 2, 1, 7, 3, 6],
[7, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[7, 1, 2, 3, 4, 5, 6],
[7, 1, 2, 3, 4, 5, 6],
[0, 1, 7, 7, 4, 5, 6],
[0, 1, 2, 7, 4, 5, 6],
[7, 1, 2, 7, 7, 5, 6],
[7, 1, 2, 3, 4, 7, 7],
[0, 1, 2, 3, 4, 5, 7],
[0, 1, 7, 0, 1, 2, 3],
[7, 1, 2, 3, 4, 5, 6]];
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
xLabelWidth={60}
data={data}
squares
height={45}
width={50}
cellStyle={(background, value, min, max, x, y) => ({
background: value === 7 ? '#27414E' : '#F5F7FA',
fontSize: '10px',
color: '#444',
width: '14%',
height: '30px',
})}
cellRender={value => value && <div>{value}</div>}
/>
It works fine, it renders the data and shows it in that heatmap table. But I don't know if it is possible to add a Popup component for each square in the table.
I added an aleart to be activated when the square is clicked:
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
xLabelWidth={60}
data={this.state.tableData}
squares
height={45}
width={50}
onClick={(x, y) => alert(`Clicked ${x}, ${y}`)} //here is the onClick added
cellStyle={(background, value, min, max, x, y) => ({
background: value === 7 ? '#27414E' : '#F5F7FA',
fontSize: '10px',
color: '#444',
width: '14%',
height: '30px',
})}
cellRender={value => value && <div>{value}</div>}
/>
This is the structure of the popup:
<Popup
content='show some data'
on='click'
pinned
trigger={<Button content='Button' />}
/>
Is there a way to add it in Heatmap?
Have tried putting it in cellRenderer?
...
cellRender={value => <Popup
content='show some data'
on='click'
pinned
trigger={<div style={{height: 50, width: 50}} />}/>}
...
Related
function validSolution(board){
for(i=0;i<board.length;i++){
if (new Set(board[i]).size != 9) return false
//if (new Set(getVertical(i,board)).size != 9) return false
}
return true
}
let getVertical = (num,board) => {
let result = []
for(i=0;i<board.length;i++){
result.push(board[i][num])
}
console.log(result)
return result
}
I am working on sudoku checker if I am adding the commented line of code the tests that were passing are failing :( like the first 'if' statement disappeared
sample input (should be false) and it is until adding second 'if' statement
[[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 0, 3, 4, 8],
[1, 0, 0, 3, 4, 2, 5, 6, 0],
[8, 5, 9, 7, 6, 1, 0, 2, 0],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 0, 1, 5, 3, 7, 2, 1, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 0, 0, 4, 8, 1, 1, 7, 9]]
The propblem is that you declare variable i without let keyword.
That means i is a global variable, so in getVertical function i store value 8 and main loop in validSolution skip to end and returns true
I wan't to create a heatmap for different days and months, but i run into a problem that xAxis doesn't change when i add aditional element in array it can have only 10 elements but i need 12.
The same problem with yAxis that is only 5 elements, but i need to add 7 in total.
After adding another element to X or Y axis - nothing happening.
JSFiddle included - https://jsfiddle.net/nw6ux40e/
JS below.
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura', 'Michi']
},
yAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
}); ```
If you want to use categories you will need to add the new values to the category array.
Next, you will need to add wanted points. Notice that array looks like this: [x, y, value], so if you want to increase the yAxis labels you will need to add an additional point for each category.
Demo: https://jsfiddle.net/BlackLabel/8pts76bn/
Data example:
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[0, 5, 67],
API: https://api.highcharts.com/highcharts/series.heatmap.data
Vuetify has a sparkline component that can be used to create simple graphs.
https://vuetifyjs.com/en/components/sparklines
I can't figure out how to add more than one sparkline in the same graph. Something like adding a second list of values to the component.
If there's no way, maybe some of you know a more suited graph tool that I could use with Vue.
<template>
<v-sparkline
:value="value"
:gradient="gradient"
:smooth="radius || false"
:padding="padding"
:line-width="width"
:stroke-linecap="lineCap"
:gradient-direction="gradientDirection"
:fill="fill"
:type="type"
:auto-line-width="autoLineWidth"
auto-draw
></v-sparkline>
</template>
<script>
const gradients = [
['#222'],
['#42b3f4'],
['red', 'orange', 'yellow'],
['purple', 'violet'],
['#00c6ff', '#F0F', '#FF0'],
['#f72047', '#ffd200', '#1feaea'],
]
export default {
data: () => ({
width: 2,
radius: 10,
padding: 8,
lineCap: 'round',
gradient: gradients[5],
value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
gradientDirection: 'top',
gradients,
fill: false,
type: 'trend',
autoLineWidth: false,
}),
}
</script>
In the code below, the first sparkline is attached normally to the v-sheet, while the second is stacked on top of the first sparkline.
<template>
<v-sheet class="stackSheet" color="white">
<v-sparkline
:value="value1"
color="blue"
line-width="3"
padding="10"
></v-sparkline>
<v-sparkline
class="stackSpark"
:value="value2"
color="red"
line-width="3"
padding="10"
></v-sparkline>
</v-sheet>
</template>
<script>
export default {
data: () => ({
value1: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
value2: [7, 4, 7, 2, 9, 0, 1, 2, 4, 7, 7, 10, 1, 3, 5],
}),
}
</script>
<style lang="css" scoped>
.stackSheet {
position: relative;
}
.stackSpark {
position: absolute;
top: 0;
left: 0;
}
</style>
I have some problems to show some values in bars. I want a chart like this: Example. I don't know what I'm missing in here.
$('#myModalChart').on('shown.bs.modal', function (e) {
var data = [{
label: "Foo",
data: [
[2],
[3, 9, 12],
[6, 0, 3],
[9, 11, 12],
[12, 0, 1],
[15, 0, 2],
[18],
[3, 12, 12],
[9, 12, 12]
]
},
{
label: "Bar",
data: [
[2],
[3, 0, 5],
[6, 3, 7],
[9, 4, 11],
[12, 1, 3],
[15, 2, 5],
[18]
]
},
{
label: "Tree",
data: [
[2],
[3, 5, 9],
[6, 7, 15],
[9, 0, 4],
[12, 3, 13],
[15, 5, 17],
[15, 17, 17],
[12, 13, 13],
[6, 15, 15],
[18]
]
},];
var options = {
series: {
bars: {
show: true,
barWidth: 1
}
},
xaxis: {
align: "center",
ticks: [
[3.5, 'text1'],
[6.5, 'text2'],
[9.5, 'text3'],
[12.5, 'text4'],
[15.5, 'text5']
]
}
};
var plot = $.plot("#chart2", data, options)
});
I want a chart like this, with labels in it. And I wish have in all of them.
What I'm missing?
You have to create and place the data value labels yourself. How to do this can be seen in this answer.
I created a fiddle adjusting it to your code. Only the first data series (foo) has labels for now. you will have to adjust the position. The relevant code:
$.each(plot.getData()[0].data, function (i, el) {
if (el.length > 1) {
var o = plot.pointOffset({
x: el[0],
y: el[1]
});
$('<div class="data-point-label">' + el[1] + '</div>').css({
position: 'absolute',
left: o.left + 4,
top: o.top,
'text-align': 'center',
display: 'none'
}).appendTo(plot.getPlaceholder()).fadeIn('slow');
}
});
But you may also have to cleanup your data. You have multiple data points with the same x values (which means bars behind / in front of each other which leads to some being invisible). Take a look at the side-by-side and stack plugins on the flot plugin page.
I have a chart (image bellow), where the green line has a reference to the year 2014, and the purple line will be 2013.
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
[gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
[gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];
This is the dataset, but look that I put both dataset in 2014 year because if I put 2014 in one dataset and 2013 in another, I miss the overlap effect and I need that effect for comparsion.
This is what happens if a put the 2013 year in one dataset and 2014 in another (image below)
How can I do the same chart, but with this overlap effect, using the 2013 year in one dataset?
This also will fix my hover functionallity.
Code
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
[gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
[gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data1, data2
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: null,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: "#838383",
timeformat: "%b/%y"
},
yaxis: {
ticks: 4
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
You use the concept of multiple axes, but just hide the second axis.
To do this you create two data sets, each with their own axis:
var data2014 = {
label: "2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "2013",
data: data2,
xaxis: 2
};
and then in the axes option setting, set ticks to false to hide one axis.
The max setting for the 2014 data is important, otherwise the data set will scale to fill the whole graph:
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
color: "#838383",
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
},{
ticks: false
}],
JS Fiddle here.
Full code below:
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2013, 1, 1), 1], [gd(2013, 2, 1), 0], [gd(2013, 3, 1), 2], [gd(2013, 4, 1), 0],
[gd(2013, 5, 1), 1], [gd(2013, 6, 1), 3], [gd(2013, 7, 1), 1], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
labelMargin: 17,
margin: {
top: 8,
bottom: 10,
left: 20
},
minBorderMargin: 25,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
color: "#838383",
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
},{
ticks: false,
}],
yaxis: {
ticks: 5
},
legend: {
backgroundOpacity: 0.5,
noColumns: 0,
position: "ne",
color: "#838383",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}