I'm using Ionic and I have a CRUD that creates a list of name "Item":
item.models.ts:
export interface Item {
key?: string;
data: string;
humor: string;
mania: string;
numero: string;
medicamento?: string;
dormidas?: string;
menstrual?: boolean;
evento?: string;
impacto?: number;
outras?: string;
}
See how the data is stored in firebase:
So, how to connect the list data created in my chart done in Chart.js?
I can create a static graph only, I would like the graphic to be dynamic and with the data stored in Firebase. On the X axis I want to put the variable "data" and on the Y axis the variable "numero".
.HTML CODE:
<div class="row">
<div class="col-md-6">
<div style="display: block;">
<canvas baseChart width="600" height="400"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType">
</canvas>
</div>
</div>
.TS CODE:
import { Item } from '../../models/item/item.models';
public lineChartData:Array<any> = [
{data: [-34, -78, 45, 65], label: 'Humor'}
];
public lineChartLabels:Array<any> = ['19/jun', '20/jun', '21/jun', '22/jun' ];
public lineChartColors:Array<any> = [
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';
Could someone please help me connect Firebase to my chart?
I have not found any material on the subject.
If possible, I would like to see a practical example.
Ionic 3 is based off Angular 2/4/5.
There is a library that you can use to connect to Firebase called AngularFire2.
Here's the documentation:
https://github.com/angular/angularfire2
As far as the chart is concerned, you can get the data retrieved from the firebase. (Usually you have to loop through the array of retrieved Firebase data and clear the lineChartData[0].data element and assign the retrieved data into the element. Afterwards, two-way binding in Angular will do its magic.
Related
I'm making a mock of data and rendering it using map. But my images take a long time to load and the component is a little slow.
I've already tried using Image component from Nextjs, but it gives an error because it only accepts a string in the src and I'm passing an array of images.
Code:
const data = [
{
id: 1,
name: 'Thanos',
image: '/images/thanos.png'
},
{
id: 2,
name: 'Jhon Wick',
image: '/images/jhon.png'
},
{
id: 3,
name: 'Spider-Man',
image: '/images/spider.png'
},
{
id: 4,
name: 'Doctor Strange',
image: '/images/strange.png'
},
{
id: 5,
name: 'Batman',
image: '/images/batman.png'
}
]
export function Home() {
return (
<div>
{data.map((d) => (
<div key={d.id}>
<img src={d.image} alt="Image" />
<p>{d.name}</p>
</div>
))}
</div>
)
}
What's the size of those images?
Try to tiny those images and check out if this will help you out
This is one service that can help you
https://tinypng.com/
About the next image component, how have you tried to use it? You shouldn't pass the whole array of images, you must use it as same you did as the HTML img tag, but pay attention to width and height props.
https://nextjs.org/docs/api-reference/next/image
Another thing, check out if your images are in the public folder
I'm facing an extrange behavior trying to implement dynamic class by props on child element when using Nuxt 3 SSR + Tailwind.
My parent component includes a child component
<section-latest-news :count="12" :columns="4" />
My child component tries to render columns based on columns property
<template>
<p class="text-xl text-center uppercase font-semibold border-b-2 mb-4 pb-1 tracking-widest">Últimas noticias {{gridCols}}</p>
<div :class="`grid gap-5 md:grid-cols-${columns}`" >
<div v-for="post in posts" :key="post.id" class="md:mb-0">
<post-card-image :post="post" />
</div>
</div>
</template>
<script setup>
import camelcaseKeys from 'camelcase-keys'
const props = defineProps({
excludeSlug: {
type: String,
required: false
},
count: {
type: Number,
required: false,
default: 6
},
columns: {
type: Number,
required: false,
default: 3
}
})
const runtimeConfig = useRuntimeConfig()
const route = useRoute()
const { data: posts } = await useFetch(`/public/latest`, {
params: {
count: props.count,
exclude_slug: props.excludeSlug
},
key: route.fullPath,
baseURL: runtimeConfig.public.apiBase,
transform: (response) => {
return camelcaseKeys(response, {deep: true})
}
})
</script>
For some reason, despite I correctly see the class md:grid-cols-3 in dev tools elements inspector, the class is not applied.
Please note that if I manually set the class without using backticks, the class works as expected, so it's not about CSS layout.
I'm guessing that is something related to SSR and lifecycle, but not sure how to fix it.
Actually, you cannot use dynamic classes with Tailwind: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Nothing related to Nuxt, interpolating a utility class is just not feasible since all the classes need to be known ahead of time (during the build): getting written in their full name in the code.
Here is how you can still achieve a similar result, but with more work of course.
So I'm using a custom icon for my clusters, and this causes the text to be off center. No problem, right? just use the anchorText? Well, there are problems.
let anchor: Array<number> = [9,3];
let styles = [{
url: "../../assets/img/mapIcons/clusterDot.svg",
width: 50,
height:50,
textSize:25,
textColor:"white",
anchorText: anchor,
}];
this.markerClusterer = new MarkerClusterer(this.map, this.markers, mcOptions);
So the problem is, if I use the new naming of 'AnchorText', I will get the following error (however, it will properly center my text)
Argument of type '{ maxZoom: number; styles: { url: string; width: number; height: number; textSize: number; textColor: string; anchorText: number[]; }[]; }' is not assignable to parameter of type 'MarkerClustererOptions'.
Types of property 'styles' are incompatible.
Type '{ url: string; width: number; height: number; textSize: number; textColor: string; anchorText: number[]; }[]' is not assignable to type
This error won't stop angular for displaying it properly (but I can't check in an error as it won't pass the build test)
Now, if I change it to 'anchor' (apparently the old name of the object) it will remove the error, but it won't actually center the text.
I'm using the latest version: "#googlemaps/markerclustererplus": "^1.0.3"
What is the proper way I should be doing this?
Thanks
So even though nobody shows using this in all the examples online, I did find this in the bitBucket. .WithDefaultStyles allows you to properly set the anchorText.
let styles = [
MarkerClusterer.withDefaultStyle({
url: "../../assets/img/mapIcons/clusterDot.svg",
width: 56,
height:56,
textSize:25,
textColor:"white",
anchorText: [-4, 0]
})]
let mcOptions = {
maxZoom:21,
styles:styles
};
this.markerClusterer = new MarkerClusterer(this.map, this.markers, mcOptions);
I'm starting to use Storybook in an Angular component library.
It works fine for components with inputs like booleans or strings, it shows those inputs using controls.
But there are certain components where the input is an object.
For those components I'm able to provide an object, but users are able to edit a string with the JSON representation of the object instead of several inputs.
How do I do this in a user-friendly way so users can edit those properties in the control without using a JSON representation of the object?
If you're using Knobs, you can write them like this:
This sample here:
class sample{
title: string;
text: string;
settings: {
language: string;
disabled: boolean;
}
}
would turn into this:
template: `
<div style="max-width:80vw;margin:auto;">
<app-custom-component
[title]="this.titleKnob"
[text]="this.textKnob"
[settings]="this.settingsKnob"
></app-custom-component>
</div>
`,
props: {
titleKnob: text('Title',''),
textKnob: text('Text area', ''),
settingsKnob: {
language: text('Default Language', 'en'),
disabled: boolean('Disabled', false),
}
}
EDIT: clone this repository for a non working reproduction. https://github.com/FickleLife/meteor-c3-test
I am using https://github.com/peernohell/meteor-c3.js/
I pull two examples off the C3 site http://c3js.org/examples.html and can get them to display once on the page, but when I try to add a second on the same page the first disappears. There's no console error and the javascript variables are different.
chart 1 html template:
<template name="chart_cp_overview">
<div id="cpOverview"></div>
</template>
chart 1 js helper:
Template.chart_cp_overview.rendered = function () {
var cpOverview = c3.generate({
data: {
columns: [
['data1', 30, 200],
['data2', 130, 100]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},
grid: {
y: {
lines: [{value:0}]
}
}
});
}
chart 2 html template:
<template name="chart_status">
<div id="chart"></div>
</template>
chart 2 helper:
Template.chart_status.rendered = function() {
var chart = c3.generate({
data: {
columns: [
['Dropped', 30],
['On Course', 120],
['DNS', 20],
['Finished', 40]
],
colors: {
'Dropped': '#E60000',
'On Course': '#00ACED',
'DNS': '#DBDBDB',
'Finished': '#00BD07'
},
type : 'donut',
onclick: function (d, i) { console.log("onclick", d, i); }
// onmouseover: function (d, i) { console.log("onmouseover", d, i); },
// onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
donut: {
title: "Entrant Status",
label: {
format: function (value, ratio) {
return value;
}
}
}
});
};
display code :
<div class="row">
<div class="col-md-6">
{{> chart_cp_overview}}
</div>
<div class="col-md-6">
{{> chart_status}}
</div>
</div>
This code above displays only the last chart - chart_status. If I remove any one of the handlebars reference the other chart displays fine, or if I have multiple handlebars to multiple charts whatever was last declared is displayed.
How can I get multiple charts to display within one page? Example is on github at https://github.com/FickleLife/meteor-c3-test
It looks like maybe you are intending the two variable names you have chosen in your template rendered functions, cpOverview and chart, to bind to the dom elements with those ids. It won't work that way.
The variable names you have chosen are local to their functions and in any case would not automatically attach to elements with that id even if they were global. So c3 is binding all these charts to the same dom element (the docs say the default is #chart), and the last one is overriding the prior ones.
You want to bind each chart to its respective element. You can use this.firstNode inside your rendered function (based on the way you have it set up), or use jquery, or this.find("div#cpOverview"), and then use the c3 api to bind the chart to it - it looks like { bindto: "div#cpOverview" } may be the one you want.