Changing bloodhound icons - javascript

I try to change the icons of bloodhound
i edited the file index.js with the following content:
global.appStore = {
dagre: false,
startNode: null,
endNode: null,
highlightedEdges: [],
spotlightData: {},
queryStack: [],
currentTooltip: null,
highResPalette: {
imageScheme: {
'User': {
url: './img1.png',
scale: 1.3,
clip: 0.85
},
},
....
.....
highResStyle: {
nodes: {
label: {
by: 'label'
},
size: {
by: 'degree',
bins: 5,
min: 10,
max: 20
},
icon: {
by: 'type',
scheme: 'imageScheme'
}
},
edges: {
type : {
by : 'type',
scheme: 'edgeScheme'
}
}
},
but i am getting red question mark in black circle, t doesn`t work when i put url from internet site.
what to do?

Related

apache echart not working with pie drill down

the drill down for pie isnt working that well, can you please let me know what im missing?
i want to have a drill down bar chart however, i changed it to pie as its what i need but running into some issues - wondering if someone has done this before, and/ can help find issues with my code.
this is what it looks like right now, cant add legend or get rid of those x axis.
functionality is there but just want to make it work.
json.
{
"highLevelNumbers": [
1269,15,54624,827,42,20895,4856
],
"highLevel":
["Electrical Equipment",
"Enclosures",
"Instrument Equipment",
"Mechanical Equipment",
"Miscellaneous Equipment",
"Piping and Pipeline Equipment",
"Valve"],
"ElectricalEquipment":
[["earthing resistor",52],
["electric battery", 66],
["electric generator", 1],
["electrical control panel", 305],
["electrical isolator", 38],
["electrical switch", 43],
["electronic flow controller", 341],
["electronic level controller", 225],
["electronic pressure controller", 232],
["electronic temperature controller", 121]],
"Enclosures":
[["electrical control panel", 305],
["electrical isolator", 38],
["electrical switch", 43]],
"InstrumentEquipment":
[["electrical isolator", 38],
["electrical switch", 43],
["electronic flow controller", 341]],
"MechanicalEquipment":
[["earthing resistor",52],
["electrical control panel", 305]],
"MiscellaneousEquipment":
[["earthing resistor",52],
["electronic flow controller", 341]],
"PipingandPipelineEquipment":
[["earthing resistor",52],
["electronic flow controller", 341]],
"Valve":
[["earthing resistor",52],
["electrical switch", 43],
["electronic flow controller", 341]]
}
javascript:
function drilldownbar_Graph() {
//values from data_import
//fetch function
fetch("drilldown.json")
.then(function (u) {
return u.json();
})
.then(function (json) {
sketchingDrillDownGraph(json);
//calling and passing json to another function data_function
});
//start of function
function sketchingDrillDownGraph(data) {
//graph
var chartDom = document.getElementById("main6");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "Drill Down Category",
left: "center",
borderColor: "#796b94",
borderWidth: 0.1,
},
legend: {
show: true,
},
label: {
show: true,
},
toolbox: {
show: true,
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true },
},
},
xAxis: {
data: data.highLevel,
splitLine: {
show: false,
},
},
yAxis: {
splitLine: {
show: false,
},
},
dataGroupId: "",
animationDurationUpdate: 500,
series: {
type: "pie",
radius: ["35%", "65%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 9,
borderColor: "black",
borderWidth: 0.5,
},
id: "jafurah",
data: [
{
value: 5,
groupId: "electricalEquipment",
},
{
value: 2,
groupId: "Enclosures",
},
{
value: 4,
groupId: "InstrumentEquipment",
},
{
value: 4,
groupId: "MechanicalEquipment",
},
{
value: 4,
groupId: "MiscellaneousEquipment",
},
{
value: 4,
groupId: "PipingandPipelineEquipment",
},
{
value: 5,
groupId: "Valve",
},
],
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
};
const drilldownData = [
{
dataGroupId: "electricalEquipment",
data: data.electricalEquipment,
},
{
dataGroupId: "Enclosures",
data: data.Enclosures,
},
{
dataGroupId: "InstrumentEquipment",
data: data.InstrumentEquipment,
},
{
dataGroupId: "MechanicalEquipment",
data: data.MechanicalEquipment,
},
{
dataGroupId: "MiscellaneousEquipment",
data: data.MiscellaneousEquipment,
},
{
dataGroupId: "PipingandPipelineEquipment",
data: data.PipingandPipelineEquipment,
},
{
dataGroupId: "Valve",
data: data.Valve,
},
];
myChart.on("click", function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
}),
},
series: {
type: "pie",
id: "jafurah",
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
graphic: [
{
type: "text",
left: 50,
top: 20,
style: {
text: "Back",
fontSize: 18,
},
onclick: function () {
myChart.setOption(option);
},
},
],
});
}
});
option && myChart.setOption(option);
// getting the data [docs total by day]
}
}
To get rid of xAxis : just remove it in the chart options. (Both xAxis and yAxis actually, no need of that in a pie chart)
To display the legend, you have to set a name to each series.
series : {
data: [
{
value: 5,
groupId: "electricalEquipment",
name: "electricalEquipment", // add this line to each series data
},
...
]
}
Here is the full working code (note that I hardcoded the values instead of using your json file to make it easier for me).
I added a param (notMerge=true) in this method : myChart.setOption(option, true); (in the click event function) so that the "Back" button disappears when it cannot be used.

Rate exceeded error when calling AWS CloudFront update

I have to delete CloudFront distribution using AWS SDK for JavaScript so I'm trying to update it first, but when I sent the request I'm getting Rate exceeded internal server error. I tried many different values inside my config but it always returns this rate error. I'm not sure if it's problem with configuration or maybe I did something else wrong. I have also created function that creates new distribution and it works fine.
My current config object looks like this:
const originId = `S3-${buckets.build.name}`;
const originDomain = `${buckets.build.name}.s3.amazonaws.com`;
const updateParams: CloudFront.UpdateDistributionRequest = {
Id: distribution.id,
IfMatch: distribution.eTag,
DistributionConfig: {
DefaultRootObject: 'index.html',
CallerReference: caller,
Comment: 'Zilo catalog',
DefaultCacheBehavior: {
AllowedMethods: {
Items: ['HEAD', 'GET'],
Quantity: 2,
CachedMethods: {
Items: ['HEAD', 'GET'],
Quantity: 2,
},
},
TargetOriginId: originId,
ViewerProtocolPolicy: 'allow-all',
MinTTL: 3600,
SmoothStreaming: false,
Compress: false,
DefaultTTL: 5000,
FieldLevelEncryptionId: '',
MaxTTL: 10000,
LambdaFunctionAssociations: {
Quantity: 0,
Items: [],
},
ForwardedValues: {
QueryString: true,
Cookies: {
Forward: 'all',
},
Headers: {
Quantity: 0,
Items: [],
},
QueryStringCacheKeys: {
Quantity: 0,
Items: [],
},
},
},
Enabled: false,
Origins: {
Items: [
{
DomainName: originDomain,
Id: originId,
CustomOriginConfig: {
HTTPPort: 80,
HTTPSPort: 443,
OriginProtocolPolicy: 'match-viewer',
OriginSslProtocols: { Items: ['SSLv3'], Quantity: 1 },
OriginReadTimeout: 10000,
OriginKeepaliveTimeout: 10000,
},
OriginPath: '',
CustomHeaders: { Quantity: 0 },
},
],
Quantity: 1,
},
Aliases: {
Quantity: 0,
},
Logging: {
Enabled: false,
IncludeCookies: false,
Bucket: '',
Prefix: '',
},
WebACLId: '',
HttpVersion: 'http2',
Restrictions: {
GeoRestriction: {
RestrictionType: 'none',
Quantity: 0,
},
},
ViewerCertificate: {
MinimumProtocolVersion: 'SSLv3',
},
CustomErrorResponses: {
Items: [],
Quantity: 0,
},
PriceClass: 'PriceClass_100',
CacheBehaviors: { Quantity: 0, Items: [] },
},
};
Any ideas what could gone wrong here?
Ran into this same issue while attempting to disable CloudFront distribution before deleting it. Ended up finding this working solution in Java:
GetDistributionConfigResponse distributionConfigResponse =
cloudFrontClient.getDistributionConfig(GetDistributionConfigRequest.builder().id(distributionId).build());
distributionETag = distributionConfigResponse.eTag();
DistributionConfig originalConfig = distributionConfigResponse.distributionConfig();
UpdateDistributionResponse updateDistributionResponse =
cloudFrontClient.updateDistribution(r -> r.id(distributionId)
.ifMatch(distributionETag)
.distributionConfig(originalConfig.toBuilder()
.enabled(false)
.build()));

Apex charts, setting series data from array in state

In my react app, I'm getting results from pouchDB that I want to use as the data points in my series for apexCharts.
I'm getting the results and putting them in state, called maxCalories, and when logging in the console they are in this format:
So I want those 7 numbers (all with the index name of caloriesBurned to be my data in the series for the chart but I'm currently getting NaN on the graph.
Here's the full code, how can I set these to the correct format to use them in the chart data?
import React, { Component } from "react";
import Chart from "react-apexcharts";
import DB from '../../db';
import * as moment from 'moment';
class TrendsComponent extends Component {
constructor(props) {
super(props);
this.state = {
maxCalories: '',
calorieRecord: {
caloriesConsumed: '',
caloriesBurned: '',
createdAt: this.newestDate,
updatedAt: undefined
},
caloriesDB: new DB('calorie-records'),
calories: {},
calorieElements: null,
options: {
},
chart: {
toolbar: {
show:false
},
id: "basic-bar"
},
xaxis: {
categories: ['3/20', '3/21', '3/22', '3/23', '3/24', '3/25','3/26']
}
},
series: [
{
name: "Trend (tracked)",
data: {this.maxCalories}
}
]
};
}
componentDidMount(){
this.setMax();
}
setMax = () => {
this.state.caloriesDB.db.find({
selector: {
$and: [
{_id: {"$gte": null}},
{caloriesBurned: {$exists: true}},
{createdAt: {$exists: true}}
]
},
fields: ['caloriesBurned', 'createdAt'],
sort: [{'_id':'desc'}],
limit: 7
}).then(result => {
console.log('max');
console.log(result);
const newDocs = result.docs;
this.setState({
maxCalories: newDocs.map(docs => docs)
});
console.log('maxCalories');
console.log(this.state.maxCalories);
}).catch((err) =>{
console.log(err);
});
}
render() {
return (
<div className="mixed-chart">
<Chart
options={this.state.options}
series={this.state.series}
type="area"
stacked="true"
width="700"
/>
</div>
);
}
}
export default TrendsComponent;
I had the same problem in my project. And I spent a lot of time in looking for solution. So here what I get:
const FinacialResultChart = (props) => {
const options = {
chart: {
toolbar: {
show: false
},
animations: {
enabled: false
}
},
stroke: {
curve: "smooth",
dashArray: [0, 8],
width: [4, 2]
},
grid: {
borderColor: props.labelColor
},
legend: {
show: false
},
colors: [props.dangerLight, props.strokeColor],
fill: {
type: "gradient",
gradient: {
shade: "dark",
inverseColors: false,
gradientToColors: [props.primary, props.strokeColor],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0,
hover: {
size: 5
}
},
xaxis: {
labels: {
style: {
colors: props.strokeColor
}
},
axisTicks: {
show: false
},
categories: [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
],
axisBorder: {
show: false
},
tickPlacement: "on"
},
yaxis: {
tickAmount: 5,
labels: {
style: {
color: props.strokeColor
}
}
},
tooltip: {
x: { show: false }
}
}
const data = [
{
name: "Итоговый результат",
data: props.userData.traidingMonth
}
]
return (
<Chart
options={options}
series={data}
type="line"
height={280}
/>
)
}
export default FinacialResultChart
So you need to change your class to const, and push all your props (api data for example) into your children chart component. In chart options you can get the chart data with props.data

Kendo UI Grid Breaks height setting on edit (Jquery)

Problem
I have a Kendo UI JQuery Grid. All functionality is working as I expect however I encounter a bug when I add new record.
The record can be added and saved but the footer of the grid "floats" halfway up the grid and the scrollbar is removed - leaving it looking corrupt.
Following further investigation I think the scroll bar is actually respecting the initial height setting but on edit the scroll seems to disappear and the grid is full height
Investigations
I have no custom handler on the create new record
I have a custom
data bound event however in the scenario above this is passed
without touching the grid
It doesn't appear to be a CSS issue as inspecting the DOM in developer tools reveals nothing of note
I have also now tried tried to add my own custom add(Point one I have kept the standard). Which fires and behaves as expected but still has the issue of the scrollbar disappearing and the footer "floating"
There are no error message in the console etc... to go on
$(".k-grid-my-create", grid.element).on("click", function (e) {
var dataSource = grid.dataSource;
dataSource.insert(0, blankTimeEntry);
grid.editRow(grid.tbody.children().first());
});
Code:
The grid is defined as:
$("#timeItemsGrid").kendoGrid({
//scrollable: false,
sortable: true,
filterable: true,
editable: true,
resizable: true,
pageable: false,
height: 750,
groupable: { sort: { dir: "desc" } },
toolbar: ["create", "save"],
dataBound: onDataBound,
dataSource: {
data: itemsToUse,
schema: {
model: {
fields: {
copiedTime: { type: "boolean" },
customerObj: { defaultValue: { customerText: null, customerId: null } },
mainCustName: { type: "string" },
item: { type: "string" },
itemText: { type: "string" },
casetaskevent: { defaultValue: { casetaskevent: null, casetaskeventText: "" } },
team: { type: "string" },
teamText: { type: "string" },
div: { type: "string" },
divText: { type: "string" },
loc: { type: "string" },
locationText: { type: "string" },
isbillable: { type: "boolean" },
mon: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
tue: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
wed: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
thu: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
fri: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
sat: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
sun: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } }
}
}
},
aggregate: [
{ field: "mon.hours", aggregate: "sum" },
{ field: "tue.hours", aggregate: "sum" },
{ field: "wed.hours", aggregate: "sum" },
{ field: "thu.hours", aggregate: "sum" },
{ field: "fri.hours", aggregate: "sum" },
{ field: "sat.hours", aggregate: "sum" },
{ field: "sun.hours", aggregate: "sum" }
]
},
and the dataBound method
function onDataBound(e) {
console.log("onDataBound");
var grid = $("#timeItemsGrid").data("kendoGrid");
var data = grid.dataSource.data();
var element;
$.each(data, function (i, row) {
if (row.dirty) {
element = $("tr[data-uid=\"" + row.uid + "\"] ");
$(element).removeClass("k-alt");
$(element).addClass("isdirty");
}
if (row.copiedTime == true) {
element = $("tr[data-uid=\"" + row.uid + "\"] ");
$(element).removeClass("k-alt");
$(element).addClass("copiedTime");
}
});
}
After pulling my hair out for hours
catching the edit function of the grid and setting the below worked
var scrollable = document.querySelector("#timeItemsGrid > div.k-grid-content.k-auto-scrollable");
scrollable.style.overflow = "scroll";
scrollable.style.overflowX = "hidden";

HIghcharts, button text undefined

I've trawled through the API and can't find where to define the alt text of custom nav buttons.
Can anyone help out?
Here's a sample of what I've got in my exporting options:
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
},
contextButton: {
menuItems: null,
symbol: 'url()',
symbolX: 1,
symbolY: 1,
width: 1,
height:1,
onclick: function() {
return false;
}
},
'downButton': {
symbol: 'url(img/glyphicons/glyphicons_200_download.png)',
symbolX: 13,
symbolY: 13,
width: 26,
height:26,
onclick: function() {
this.exportChart();
}
}
},
type: 'image/png'
},
_titleKey is what you want. See http://jsfiddle.net/x36qR/1/ for an example.
make sure you define lang: { }
parameter in the chart object
then use the _titleKey: "example" in the lang to set the desired title
.highcharts({
lang:{
example: "Title Name"
},

Categories

Resources