I am trying to build a chart using organisation module of highcharts in angular.
Currently, I am creating it by using static data but it should be created based on api result.
Also i want whenever any node is clicked than an active class should be applied to this and its child. I have used click event for this and class is being applied but css is not reflecting.
below is my line of code can you please suggest
comp.ts
export class OrganisationComponent implements OnInit {
public options: any = {
chart: {
height: 600,
inverted: true
},
title: {
text: 'Org Chart'
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
cursor: 'pointer',
events: {
click: function (event) {
event.point.linksFrom.forEach(element => {
if(element.toNode){
if(element.toNode.linksFrom){
element.toNode.linksFrom.forEach(innerElement => {
innerElement.toNode.dataLabel.addClass('active');
})
}
}
element.toNode.dataLabel.addClass('active');
});
}
},
data: [
['PMO', 'TM'],
['TM', 'D1'],
['TM', 'D2'],
['TM', 'D3'],
['D1', 'Intern'],
],
nodes: [
{
id: 'PMO',
icon: 'account_circle',
name: 'Project Manager'
},
{
id: 'TM',
icon: 'account_circle',
name: 'Team Lead'
},
{
id: 'D1',
icon: 'account_circle',
name: 'Developer 1'
},
{
id: 'D2',
icon: 'account_circle',
name: 'Developer 2'
},
{
id: 'D3',
icon: 'account_circle',
name: 'Developer 3'
},
{
id: 'Intern',
icon: 'account_circle',
name: 'Intern'
},
],
dataLabels: {
nodeFormat : `{point.name}`
}
}],
};
constructor() {}
ngOnInit() {
Highcharts.chart('container', this.options); // organization
}
}
.html
.css
.active {
font-size: 22px;
color: red;
}
stackblitz link
https://stackblitz.com/edit/angular-bar-highcharts-bnom1n
I am stuck how can i make it work with api data
how to apply active class on all child nodes and clicked node
Try this
Add styles in style.css as per other answer for css , for n level highlight try this recursive approach.
// update your click event as per below
events: {
click: function (event) {
event.point.linksFrom.forEach(element => {
highlightPoints(element);
element.toNode.dataLabel.addClass('active');
});
function highlightPoints(element){
if(element.toNode){
if(element.toNode.linksFrom){
element.toNode.linksFrom.forEach(innerElement => {
highlightPoints(innerElement);
innerElement.toNode.dataLabel.addClass('active');
})
}
}
}
}
To active child nodes by clicking on parent, do the following:
add .active style in style.css
.active {
font-size: 30px;
background-color: red;
}
Here is the updated stackblitz demo
Hope this helps.
Thanks
Related
I want to customize my mind map using jsMind
Currently this is my code:
var mind = { meta: {
name: 'jsMind remote',
author: 'hizzgdev#163.com',
version: '0.2',
},
format: 'node_tree',
data: {
id: 'root',
topic: 'jsMind',
children: [
{
id: 'easy',
topic: 'Easy',
direction: 'left',
children: [
{ id: 'easy1', topic: 'Easy to show' },
{
'id': 'other3',
'background-image': 'ant.png',
'width': '100',
'height': '100',
},
],
},
{
id: 'open',
topic: 'Open Source',
direction: 'right',
children: [
{
'id': 'open2',
'topic': 'BSD License',
'leading-line-color': '#ff33ff',
},
],
}
};
_jm.show(mind);
Any ideas to complete this challenge are welcome.
I tried to execute in the browser but i don't know how to implement that i wanted to do.
EDITED
I have changed the code a made a new line perfectly but a tooltip doesn't appear.
jsMind does not provide a built-in mechanism to display tooltip, but the topic of node can be HTML, so would you like to have a try to add a tooltip to it with HTML? Like that:
var mind = {
// ...
data: {
id: 'root'
topic: '<span title="good">jsMind Example<span>'
}
// ...
}
screenshot of it
I am using React with webPack with tinyMCE and I have a styling issue.
I created my own btn and on click I create my html structure with classes.
like this :
<div class="test" ><p>' + date + '</p></div><p></p>'
I tried importing the stylesheet into the file where the editor is used, but it didn't help.
How to correctly connect styles using webPack and react?
var page1Config = {
title: 'Redial Demo - Page 2',
body: {
type: 'panel',
items: [
{
type: 'input',
name: 'date',
label: 'Введите Фразу',
items: [
{ value: 'meow', text: 'Cat' },
{ value: 'woof', text: 'Dog' },
{ value: 'thunk', text: 'Rock' }
]
},
]
},
buttons: [
{
type: 'custom',
name: 'lastpage',
text: 'Done',
disabled: false
}
],
initialData: {
choosydata: ''
},
onAction: (dialogApi, details) => {
var {date} = dialogApi.getData();
// problem is here class="test"
tinymce.activeEditor.execCommand('mceInsertContent', false, '<div class="test" ><p>' + date + '</p></div><p></p>');
dialogApi.close();
}
};
tinymce.init({
force_br_newlines : true,
force_p_newlines : true,
selector: 'textarea.wizard',
toolbar: 'wizardExample',
height: '900px',
setup: (editor) => {
editor.ui.registry.addButton('wizardExample', {
icon: 'code-samplelklk',
onAction: () => {
editor.windowManager.open(page1Config)
}
})
}
})
;
Example
Are you wanting to style the content in the editor via CSS? If so you can use the content_css or content_style settings in your TinyMCE configuration to pass CSS to the editor:
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
I am having a bit of trouble implementing the sideMenu to the following code: (see the startTabs).
I call this after "login" is clicked on my root screen. The root screen looks like the following:
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: "navigation.playground.WelcomeScreen",
passProps: {
text: "stack with one child"
},
alignment: "center",
options: {
topBar: {
visible: true,
title: {
text: "main screen"
}
}
}
}
}]
}
}
});
const startTabs = () => {
Promise.all([
Icon.getImageSource("md-map", 30),
Icon.getImageSource("ios-share-alt", 30)
]).then(sources => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "navigation.playground.FindPlaceScreen",
options: {
bottomTab: {
text: "Find Place",
icon: sources[0]
},
topBar: {
visible: true,
title: {
text: "Find Place"
}
}
}
}
}
]
}
},
{
stack: {
children: [{
component: {
name: "navigation.playground.SharePlaceScreen",
options: {
bottomTab: {
text: "Share Place",
icon: sources[1]
},
topBar: {
// visible: true,
title: {
text: "Share Place"
}
}
}
}
}]
}
}
]
}
}
});
});
};
Now in order for me to implement sideMenu after login, Would I implement it in the "startTabs"? or elsewhere?
Solved this. Sorry I am a new programmer, so I had a spelling mistake in my sideDrawer component where "render" was spelled "redner". Took me the longest time to figure this out!!!
Otherwise the code I pasted in initial question is correct (for anyone who looks at this for reference). Thanks!
so I am trying to modify the example Cumulative flow chart here so that it has a release dropdown, making it so that it only shows information pertaining to a given release. My problem is that when a new release is selected from the release dropdown, the graph does not reload itself, and so it never actually shows information pertinent to the selected release. I think I have implemented the listeners correctly but I am not sure, so I am wondering if someone could tell me why this is happening and how to fix it. Thanks! My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Historical Summary</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CFDCalculator', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
config: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
getMetrics: function() {
return _.map(this.getStateFieldValues(), function(stateFieldValue) {
return {
as: stateFieldValue,
groupByField: this.getStateFieldName(),
allowedValues: [stateFieldValue],
f: 'groupByCount',
display: 'area'
};
}, this);
}
});
Ext.define('Rally.example.CFDChart', {
extend: 'Rally.app.App',
requires: [
'Rally.example.CFDCalculator'
],
launch: function() {
this.add({
xtype: 'rallyreleasecombobox',
fieldLabel: 'Filter by Release:',
project: this.getContext().getProject(),
//value: Rally.util.Ref.getRelativeUri(this.getContext().getRelease()),
listeners: {
select: this._onSelect,
ready: this._onLoad,
scope: this
}
});
},
_onLoad: function() {
this.add({
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
//context: this.getContext();
});
},
_onSelect: function() {
var histChart = this.down('rallychart');
histChart.refresh({
storeConfig: {
filters: [this._getOwnerFilter()]
}
});
},
_getOwnerFilter: function() {
//var userCombo = this.down('rallyusersearchcombobox');
var releaseValue = this.down('rallyreleasecombobox');
return {
property: 'Release',
operator: '=',
value: releaseValue.getValue()
};
},
/**
* Generate the store config to retrieve all snapshots for stories and defects in the current project scope
* within the last 30 days
*/
_getStoreConfig: function() {
return {
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'TestSet' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) }
},
fetch: ['ScheduleState'],
hydrate: ['ScheduleState'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity
};
},
/**
* Generate a valid Highcharts configuration object to specify the chart
*/
_getChartConfig: function() {
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Project Cumulative Flow: User Stories & Test Sets'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 1,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
}
});
Rally.launchApp('Rally.example.CFDChart', {
name: 'Historical summary: test cases, stories, and defects'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Your code errors with "Uncaught TypeError: undefined is not a function" on line
histChart.refresh
I modified example of ProjectCumulativeFlow to filter by Release. Full code is in this github repo.
Instead of extending Rally.app.App, I extended Rally.app.TimeboxScopedApp.
SnapshotStore may filter by Release, but requires ObjectID.
Here is the find:
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'Defect' ] },
Release: this.getContext().getTimeboxScope().record.data.ObjectID,
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID
}
To update the app after Release selection check if the chart already exists (if yes, destroy it):
onScopeChange: function() {
if (this.down('#mychart')) {
this.down('#mychart').destroy();
}
this.add({
xtype: 'rallychart',
itemId: 'mychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
});
},
I am very much beginner to Sencha Touch. I want to display a static list to the screen. The code I tried is from sencha docs guides 'using list'. However, blank screen appears when compiled and run. Do I have to add the list to the Viewport? What am I missing? Please help.
My code is:
Ext.application({
launch: function () {
Ext.create('Ext.List', {
store: {
fields: ['name'],
data: [
{ name: 'A' },
{ name: 'B' },
{ name: 'C' },
{ name: 'D' }
]
},
itemTpl: '{name}'
});
}
});
May be this one help you
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
Sorry! My bad. I made it with a little bit of work.
I just did this:
launch: function() {
var list = Ext.Create('Ext.List',{..
.....
.....
itemTpl = '{name}'
});
Ext.Viewport.add(list);
}