I am trying to build a pie chart in Kendo-ui-angular2. Pie chart is displayed but labels are not. Any live plunker or example is highly appreciated.
<kendo-chart>
<kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
<kendo-chart-legend position="top" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of series"
type="donut" [data]="item.data" [name]="item.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
private series: any[] = [{
name: ["India","Aus", "Fin"],
data: [3.907, 7.943, 7.848]
}];
You have to add :
<kendo-chart-series-defaults>
<kendo-chart-series-defaults-labels [visible]="true" </kendo-chart-series-defaults-labels>
</kendo-chart-series-defaults>
Related
I am trying to emulate the Lookup column link style in another column using column formatting.
The Lookup column links have a specific color and position within the column cell.
As shown below, I want the links in My Column to look like those in Lookup Column.
Using browser developer tools, I can see that there are differences in the HTML of each column:
Lookup column link HTML:
<div role="gridcell" aria-readonly="true" aria-colindex="7" class="ms-DetailsRow-cell cell-223 cellUnpadded-111" data-automationid="DetailsRowCell" data-automation-key="LookupColumn" style="width: 190px;">
<div>
<button type="button" class="ms-Link od-FieldRender od-FieldRender-lookup root-211" aria-label="My Lookup Value Here" role="link" tabindex="-1">
My Lookup Value Here
</button>
</div>
</div>
My Column link HTML:
<div role="gridcell" aria-readonly="true" aria-colindex="8" class="ms-DetailsRow-cell cell-113 cellUnpadded-111" data-automationid="DetailsRowCell" data-automation-key="MyColumn" style="width: 299px;">
<div class="customField_ab5ae447">
<div class="sp-field-customFormatter">
<a style="margin-left:30px;" target="_blank" href="https://some-link-here.com" rel="noopener noreferrer " data-interception="off" tabindex="-1">
click here to view something
</a>
</div>
</div>
</div>
This is the JSON I have used to create a link in My Column:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"style": {
"margin-left": "30px"
},
"elmType": "a",
"txtContent": "click here to view something",
"attributes": {
"target": "_blank",
"href": "https://some-link-here.com"
}
}
]
}
How can I modify the JSON so that the link has the same style as the Lookup column link?
Edit:
There is a similar question here, but the answers do not produce the same styling as the Lookup link column.
through the screenshot I notice the lookup column is also using column formatting. You could edit lookup column using column formatting to see what JSON code are using in it. Then compare which style it is using, such as font, color and so on.
Or, you could provide the JSON code in Lookup Column for further research.
I am using a Primeng datatable to display editable entries from a database. When a row is clicked, a new component is displayed to allow editing of the associated data for the row. When a new row is clicked, the component will show the data for that row instead, and so on.
Obviously, this is exclusive- only one row can be selected at a time. I want to highlight the currently 'active' row in a different color, so when a new row is selected any previously hightlighted row should be reset to its default color.
At present I have the following in my template:
<p-dataTable [value]="rowData" [rowStyleClass]="highlightSelectedRow" [rowHover]="true" (onRowClick)="rowClick($event)">
<ng-template ngFor let-col [ngForOf]="cols">
<p-column [field]="col.field" [header]="col.header"></p-column>
</ng-template>
</p-dataTable>
...and in my component:
rowClick($event){
const rowData = $event.data;
rowData.selected = !rowData.selected;
// and do some other stuff...
}
highlightSelectedRow(rowData: any, rowIndex: number){
return (rowData.selected) ? 'selected' : '';
}
...CSS to style selected row:
.row.selected {
background-color: red;
}
This works insofar as highlighting the clicked row, but highlighted rows remain highlighted, and I'm wondering about the best way to reset them.
I guess I could loop through all the rows of data and find the row with selected property set to true and set it to false, but this seems a rather inefficient way of doing it, especially if I am dealing with many thousands of rows of data.
Am I missing a better, built-in way of doing this with Primeng?
This works insofar as highlighting the clicked row, but highlighted rows remain highlighted, and I'm wondering about the best way to reset them.
Create a class for unselected row such as
.row.unselected {
background-color: white;
}
and affect this class whenever you unselect a row
highlightSelectedRow(rowData: any, rowIndex: number){
return (rowData.selected) ? 'selected' : 'unselected';
}
See this simular SO question or Plunker for more details.
I have this scenario:
HTML:
<p-dataTable class="table table-responsive" #dealData [value]="dealList" sortMode="multiple"
[(selection)]="selectedDeals"
dataKey="hncId" scrollable="true" scrollHeight="540px" [rowStyleClass]="highlightSelectedRow"
styleClass="table" [paginator]="true" [rows]="100" [pageLinks]="5">
....
<p-column [header]="'Details' | translate" [style]="{'text-align': 'center'}">
<ng-template let-row="rowData" pTemplate type="body">
<button type="button" (click)="showDealDetail(row)" (mouseover)="row.selected = !row.selected" (mouseout)="row.selected = !row.selected" class="viewButton" pButton
[label]="'View' | translate"></button>
</ng-template>
</p-column>
...
</p-dataTable>
Component:
highlightSelectedRow(rowData: any, rowIndex: number) {
return (rowData.selected) ? 'rowSelected' : '';
}
CSS:
tr.rowSelected > td {
background-color: #ebf8ee !important;
}
This highlights one row at a time. Key is (mouseover) and (mouseout).
This HTML for the Kendo Angular dropdown leaves a single comma for the empty/default value and does not allow me to go back to an empty value once I've selected a value. I've played with all sorts of ternary operators on my template to no avail. Should I make a pipe for all instances of LastName, FirstName to make things easier?
<kendo-dropdownlist id="cost-engineer-dropdown"
formControlName="CostEngineerId"
[defaultItem]="{ text: 'Select an Engineer', value: '' }"
[data]="costEngineer | async"
[textField]="'LastName'"
[valueField]="'Id'"
value="this.LastName"
(valueChange)="valueChange('this.Id')"
(selectionChange)="selectionChange($event)"
[formControl]="masterProjectFormGroup.get('CostEngineerId')"
[valuePrimitive]="true"
[(ngModel)]="CostEngineerId"
>
<ng-template kendoDropDownListItemTemplate let-dataItem>
{{dataItem?.LastName}}, {{dataItem?.FirstName}}
</ng-template>
<ng-template kendoDropDownListValueTemplate let-dataItem>
{{dataItem?.LastName}}, {{dataItem?.FirstName}}
</ng-template>
</kendo-dropdownlist>
How can I format category axes in chart?
I found this help file, but I can not connect it with my source code:
<kendo-chart [categoryAxis]="{ categories: graphsCategories }">
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of graphsSeries" type="line"
[data]="item.timers"
[name]="item.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
I would like to format date to view only days:
Change this:
<kendo-chart-series-item *ngFor="let item of graphsSeries" type="line" [data]="item.timers" [name]="item.name">
</kendo-chart-series-item>
To this:
<kendo-chart-series-item *ngFor="let item of graphsSeries" type="line" [data]="item.timers" [name]="item.name">
<kendo-chart-category-axis-item-labels format="EEEE">
</kendo-chart-category-axis-item-labels>
</kendo-chart-series-item>
Change the format to whatever you want but EEEE will give you the day
I have the channel Market and Family. Both have the same expressionengine's category group.
I want to print out all the entries of the channel Market with the category XY, and for each market I want to print ONLY the first family entry of category XY related to it.
In my solution, seems that the category parameter inside the relationship field "market-families" doesn't work. here is the code:
{exp:channel:entries channel="Market" category="{segment_2_category_id}" orderby="title" sort="asc"}
{if "{url_title}" == "{segment_3}"}
<li class="active">
{if:else}
<li>
{/if}
{market-families orderby="title" sort="asc" category="{segment_2_category_id}" limit="1"}
{title}
{/market-families}
</li>
{/exp:channel:entries}
Legend:
{segment_2_category_id} -> plugin to get the category id from a segment.
market-families -> Multiple relationship field inside channel Market
Thank you for any help :)
Have you tried manually entering the category id in the parameter instead of using the plugin just to verify that it's not the plugin?
I couldn't find any specific reference to the relationship field being able to use the category parameter in ExpressionEngine's documentation: http://ellislab.com/expressionengine/user-guide/modules/channel/relationships.html