VueJS 3 and vue-google-charts - vuejs3

I am a beginner in VueJS. I am trying to create some visualization using vue-google-charts library but I am unable to do. I followed some online tutorials like this.
But I am receiving this error in console:
[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.
at <GChart type="PieChart" options=
Object { width: 1100, height: 400 }
data=
Array(6) [ (2) […], (2) […], (2) […], (2) […], (2) […], (2) […] ]
>
at <App>
at <App> runtime-core.esm-bundler.js:6870
[Vue warn]: Property "_self" was accessed during render but is not defined on instance.
at <GChart type="PieChart" options=
Object { width: 1100, height: 400 }
data=
Array(6) [ (2) […], (2) […], (2) […], (2) […], (2) […], (2) […] ]
>
at <App>
at <App> runtime-core.esm-bundler.js:6870
[Vue warn]: Unhandled error during execution of render function
at <GChart type="PieChart" options=
Object { width: 1100, height: 400 }
data=
Array(6) [ (2) […], (2) […], (2) […], (2) […], (2) […], (2) […] ]
>
at <App>
at <App>

got the same problem on VueJS 3, I tried serveral packages end up using a different library.
https://www.npmjs.com/package/#j-t-mcc/vue3-chartjs

Related

Edges collection undefined until _collections() operation is used

I'm using ArangoDB 3.4.2 and I have a weird problem that I'm not able to explain...
I create a graph (myGraph) in the following in arangosh:
var graph_module = require('#arangodb/general-graph');
var myGraph = graph_module._create('mygraph');
myGraph._addVertexCollection('vertexes');
var edges = graph_module._relation('edges', ['vertexes'], ['vertexes']);
myGraph._extendEdgeDefinitions(edges);
Being vertexes and edges the collections for vertexes and edges, respectively.
Now, I create two vertexes:
db.vertexes.save({"name": "A", "_key": "A"});
db.vertexes.save({"name": "B", "_key": "B"});
So far so good. But now I try to create the edge between both and I get a fail:
127.0.0.1:8529#myDB> db.edges.save("vertexes/A", "vertexes/B", {"name": "A-to-B"});
JavaScript exception: TypeError: Cannot read property 'save' of undefined
!db.edges.save("vertexes/A", "vertexes/B", {"name": "A-to-B"});
! ^
stacktrace: TypeError: Cannot read property 'save' of undefined
at <shell command>:1:9
It seems that db.edges is undefined:
127.0.0.1:8529#MyDB> console.log(db.edges)
2019-01-26T19:01:52Z [98311] INFO undefined
But now, if I run db._collections() it seems that db.edges gets defined (weird!)
127.0.0.1:8529#MyDB> db._collections()
...
127.0.0.1:8529#MyDB> console.log(db.edges)
2019-01-26T19:02:58Z [98311] INFO [ArangoCollection 16807, "edges" (type edge, status loaded)]
and in this moment, the db.edges.save(...) operation works:
127.0.0.1:8529#MyDB> db.edges.save("vertexes/A", "vertexes/B", {"name": "A-to-B"});
{
"_id" : "edges/16899",
"_key" : "16899",
"_rev" : "_YGsKKq2--_"
}
Why db.edges is undefined at the first save()? Why a show colletions operation (which I understand is read-only) is getting it defined? Maybe I'm doing something wrong?
When executing db.edges.save() an internal cache is accessed. If this cache is clear, executing db.edges.save() works to save an edge. Since db._collections() resets this cache, it is possible to run the command afterwards. However if this cache is not clear, an error is thrown as you observed.
The correct and safe way is to access the collection via db._collection("collection-name").
Therefore you can use the following command to save an edge in the edges collection:
db._collection("edges").save("vertexes/A", "vertexes/B", {"name": "A-to-B"});

SyntaxError: Unexpected token: punc (.) in 3rd party css

I try to run
✗ gulp build:dist
and i get this error:
events.js:160
throw er; // Unhandled 'error' event
^
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: punc (.)
File: /Users/eladb/.../public/js/min/vendor.js
Line: 110474
It has no stack in my code, so i have opened vendor.js at line 110474
all i saw is an error in css of 3rd party component.
})(window, window.angular);
.lf-ng-md-file-input {
margin-top: 5px;
margin-bottom: 5px;
}
.lf-ng-md-file-input .lf-ng-md-file-input-preview-container {
how can i fix it if it's not my css code?

Ecto Changeset add functionality for warnings

I created a fork of ecto repository to extend Ecto.Changeset module with the ability to add warnings to the changeset. I wanted to have an add_warnings/4 function which adds a warning to the changeset as a simple list of warnings with this structure warnings: [{atom, {String.t, Keyword.t}}], similar to errors. The difference between the behavior of warnings and errors is that when an error occurs the data are not persisted, but when a warning occurs the data are persisted.
Ecto.Changeset struct extended with keys warnings and warningless?:
defstruct valid?: false, warningless?: false, data: nil, params: nil, changes: %{}, repo: nil,
errors: [], warnings: [], validations: [], required: [], prepare: [],
constraints: [], filters: %{}, action: nil, types: nil,
empty_values: #empty_values
Ecto functions for casting, changing, processing params, etc. adjusted. Function add_warnings/4 added:
#spec add_warning(t, atom, String.t, Keyword.t) :: t
def add_warning(%{warnings: warnings} = changeset, key, message, keys \\ []) when is_binary(message) do
%{changeset | warnings: [{key, {message, keys}}|warnings], warningless?: false}
end
The result is that I receive changeset with expected keys:
#Ecto.Changeset<action: nil, changes: %{}, data: #Company.Booking<>, errors: [],
valid?: true, warnings: [], warningless?: true>
When I make a change with error and warning I receive:
#Ecto.Changeset<action: nil,
changes: %{pickup_address: #Ecto.Changeset<action: :update,
changes: %{street_name: nil}, data: #Company.Address<>,
errors: [street_name: {"can't be blank", [validation: :required]}],
valid?: false,
warnings: [phone_number: {"This phone number is not common in Netherlands",
[]}], warningless?: false>}, data: #Company.Booking<>, errors: [],
valid?: false, warnings: [], warningless?: true>
So, everything is as expected, as far as warnings are concerned. Then, when I make a change with a warning but without an error, I receive:
#Ecto.Changeset<action: nil,
changes: %{pickup_address: #Ecto.Changeset<action: :update,
changes: %{street_name: "sss"}, data: #Company.Address<>, errors: [],
valid?: true,
warnings: [phone_number: {"This phone number is not common in Netherlands",
[]}], warningless?: false>}, data: #Company.Booking<>, errors: [],
valid?: true, warnings: [], warningless?: true>
Everything is as expected. When I don't make any changes to the form I still should receive a warning for phone number, but I receive:
#Ecto.Changeset<action: nil, changes: %{}, data: #Company.Booking<>, errors: [],
valid?: true, warnings: [], warningless?: true>
I got a changeset without any warnings as there is no changes key in changeset because the data didn't change.
The question is as follows, how to implement warnings functionality to always have warnings in the changeset, even if no change was made?
You should consider to prefill the warnings at the very beginning of the each changeset function you would create - since you can't use plug there you can come up to write a macro that will handle this logic for you, __using__ is advised, so it would be quite easy to distinguish your logic from Ecto's default logic.
Your validation shouldn't add warnings to warnings list, but you have to implement it another way around - if the field is fine, you would remove already existing warnings from this list. That way you would be sure that your changeset is fine when it's warningless, because it removed all the warnings from this list and it would works perfectly for empty changes in changeset.

Projection from Mongo API C# driver not supported while querying DocumentDB

I am using following code (MongoDB C# driver) to projects fields ,
where queryDocument = '{{ "FullName" : /myname/i }}'
BsonDocument projectionDefination = Builders.Projection.ToBsonDocument();
projectionDefination.Add(new BsonElement("FullName", "myname"));
collection.Find(queryDocument).Project(projectionDefination);
getting following error:
{"Command failed."}
{{ "_t" : "OKMongoResponse", "ok" : 0, "code" : 9, "errmsg" : "Syntax error, incorrect syntax near '9'.", "$err" : "Syntax error, incorrect syntax near '9'." }}
Can anyone update on this?
I also tried above with RoboMongo
Command: db.getCollection('Employee').find({ "FullName": /User/i}).projection({ "FullName" : "$FullName" })
Received following error:
Error: error: {
"_t" : "OKMongoResponse",
"ok" : 0,
"code" : 9,
"errmsg" : "Syntax error, incorrect syntax near '15'.",
"$err" : "Syntax error, incorrect syntax near '15'."
}
According to your description, I checked this issue and I could encounter the same issue:
As mongoDB document states about Projection in db.collection.find():
The projection parameter determines which fields are returned in the matching documents. The projection parameter takes a document of the following form:
{ field1: <value>, field2: <value> ... }
The <value> can be any of the following:
1 or true to include the field in the return documents.
0 or false to exclude the field.

Node-SASS Compiler fails - Invalid CSS

I am trying to compile a .sass file using the node-sass module from a nodejs application. However the compile fails with an Invalid CSS Error.
Here is my SCSS:
body {
background: rgb(255, 0, 0);
}
Here is the full error message:
Original Error: { [Error: Invalid CSS after "body {": expected "}", was "{"]
status: 1,
file: 'C:/localhost/NodeJS-Server/private/sass/style.sass',
line: 2,
column: 7,
message: 'Invalid CSS after "body {": expected "}", was "{"',
formatted: 'Error: Invalid CSS after "body {": expected "}", was "{"\n on line 2 of private/sass/style.sass\n>> body { {\n ------^\n' }
I have no idea where this second '{' comes from.
SCSS files use the .scss extension, not .sass. The two formats have a different syntax.
Read about the differences here: https://responsivedesign.is/articles/difference-between-sass-and-scss

Resources